Cookies, localstorage e sessionstorage

O que é?

Os Cookies, localstorage e sessionstorage são mecanismos de armazenamento de dados no browser, todos não são indicados para armazenas dados sensíveis e a maior diferença entre eles é que:

Sessionstorage armazena os dados somente na sessão, ou seja, quando trocamos de aba ou fechamos a mesma esse dado é “apagado”.
Localstorage mantém os dados por mais tempo, somente apagando ou limpando o local de armazenamento para ele "sumir”
Cookie por sua vez, tem o mesmo comportamento do localstorage, mas garante um pouco mais de segurança, sendo ate utilizando para armazenar dados para detectar se o usuário esta logado ou não. Nessa aula vou ensinar como utilizar em cada caso esses mecanismos e para isso vou criar um projeto de login utilizando nextjs, mas podemos utilizar qualquer framework ou o famoso vanilla (javascript raiz) rs.

Por onde começo?

Tenha um projeto onde quer aplicar ou crie um do zero assim comigo:

npx create-next-app@latest --typescript

Entre na pasta do projeto utilizando um terminal e rode o projeto com:

npm run dev

Pronto já temos um projeto rodando, agora vamos limpar ele para criar nossa pagina de aprendizado:

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>
          Aprendendo sessionStorage, localStorage e cookie
        </title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main></main>
    </div>
  );
};

export default Home;

Se você já tem um projeto para aplicar o que vamos estudar, ótimo, vamos lá.

SessionStorage

// Salva os dados na sessionStorage
sessionStorage.setItem('chave', 'valor');

// Obtém os dados da sessionStorage
const data = sessionStorage.getItem('chave');

LocalStarage

// Salva os dados na localStorage
localStorage.setItem('chave', 'valor');

// Obtém os dados da localStorage
const data = localStorage.getItem('chave');

// Salva os dados no Cookie
document.cookie="chave=valor;max-age=max-age-in-seconds"

// Obtém os dados do Cookie
const cookieValue = document.cookie
  .split('; ')
  .find((row) => row.startsWith(chave='))
  ?.split('=')[1];

Nosso código final ficara assim:

import type { NextPage } from "next";
import Head from "next/head";
import { useEffect, useState } from "react";

const Home: NextPage = () => {
  const [dateSession, setDateSession] = useState("");
  const [dateLocal, setDateLocal] = useState("");
  const [dateCookie, setDateCookie] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      setDateSession(sessionStorage.getItem("chave") || "");
      setDateLocal(localStorage.getItem("chave") || "");

      const newDataCookie = document.cookie
        .split("; ")
        .find((row) => row.startsWith("chave2="))
        ?.split("=")[1];

      setDateCookie(newDataCookie || "");
    }
  }, []);

  return (
    <div>
      <Head>
        <title>Aprendendo sessionStorage, localStorage e cookie</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>SessionStorage: {dateSession}</h1>
        <button
          onClick={() => {
            sessionStorage.setItem("chave", "valor");
          }}
        >
          Set Session Storage
        </button>

        <h1>LocalStorage: {dateLocal}</h1>
        <button
          onClick={() => {
            localStorage.setItem("chave", "valor");
          }}
        >
          Set Local Storage
        </button>

        <h1>Cookie: {dateCookie}</h1>
        <button
          onClick={() => {
            document.cookie = "chave=valor;max-age=1200";
          }}
        >
          Set Cookie Storage
        </button>
      </main>
    </div>
  );
};

export default Home;

Bônus

Todo mundo já passou pela situação de criar um form e o google chrome preencher com os dados que temos salvos né, como senhas e login. Sabemos tambem que o convencional não funciona com o chrome (autocomplete=”off”) e então vamos para outra solução:

<input
  type="text"
  name="login"
  placeholder="Login"
  className={styles.input}
  readOnly
  onFocus={(e) => e.target.removeAttribute("readonly")}
/>

Assista o vídeo e faça comigo essa sessão se aprendizado: Vídeo

https://www.frontacademy.com.br/

Expert Class - SessionStorage, localStorage e cookies