JavaScript e `Web Storage`

Articles

Este artigo explica JavaScript e o Web Storage.

Web Storage é um mecanismo poderoso e simples para armazenar dados no navegador, consistindo principalmente em dois tipos: localStorage e sessionStorage. Explicaremos suas diferenças, usos e exemplos práticos de código passo a passo.

YouTube Video

javascript-web-storage-iframe.html

  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5    <title>Web Storage Demo</title>
  6    <style>
  7        * {
  8            box-sizing: border-box;
  9        }
 10
 11        body {
 12            margin: 0;
 13            padding: 1em;
 14            padding-bottom: 10em;
 15            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16            background-color: #f7f9fc;
 17            color: #333;
 18            line-height: 1.6;
 19        }
 20
 21        .container {
 22            max-width: 800px;
 23            margin: 0 auto;
 24            padding: 1em;
 25            background-color: #ffffff;
 26            border: 1px solid #ccc;
 27            border-radius: 10px;
 28            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29        }
 30
 31        .container-flex {
 32            display: flex;
 33            flex-wrap: wrap;
 34            gap: 2em;
 35            max-width: 1000px;
 36            margin: 0 auto;
 37            padding: 1em;
 38            background-color: #ffffff;
 39            border: 1px solid #ccc;
 40            border-radius: 10px;
 41            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42        }
 43
 44        .left-column,
 45        .right-column {
 46            flex: 1 1 200px;
 47            min-width: 200px;
 48        }
 49
 50        h1,
 51        h2 {
 52            font-size: 1.2rem;
 53            color: #007bff;
 54            margin-top: 0.5em;
 55            margin-bottom: 0.5em;
 56            border-left: 5px solid #007bff;
 57            padding-left: 0.6em;
 58            background-color: #e9f2ff;
 59        }
 60
 61        button {
 62            display: block;
 63            margin: 1em auto;
 64            padding: 0.75em 1.5em;
 65            font-size: 1rem;
 66            background-color: #007bff;
 67            color: white;
 68            border: none;
 69            border-radius: 6px;
 70            cursor: pointer;
 71            transition: background-color 0.3s ease;
 72        }
 73
 74        button:hover {
 75            background-color: #0056b3;
 76        }
 77
 78        #output {
 79            margin-top: 1em;
 80            background-color: #1e1e1e;
 81            color: #0f0;
 82            padding: 1em;
 83            border-radius: 8px;
 84            min-height: 200px;
 85            font-family: Consolas, monospace;
 86            font-size: 0.95rem;
 87            overflow-y: auto;
 88            white-space: pre-wrap;
 89        }
 90
 91        .highlight {
 92            outline: 3px solid #ffc107;
 93            /* yellow border */
 94            background-color: #fff8e1;
 95            /* soft yellow background */
 96            transition: background-color 0.3s ease, outline 0.3s ease;
 97        }
 98
 99        .active {
100            background-color: #28a745;
101            /* green background */
102            color: #fff;
103            box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
104            transition: background-color 0.3s ease, box-shadow 0.3s ease;
105        }
106
107        body.dark {
108            background-color: black;
109            color: white;
110        }
111    </style>
112</head>
113
114<body>
115    <button onclick="testLocalStorage()">Test Local Storage</button>
116
117    <script>
118        function testLocalStorage() {
119            // Test operations
120            localStorage.setItem("username", "Alice");     // Save new value
121            localStorage.setItem("username", "Bob");       // Update value
122            localStorage.removeItem("username");           // Remove key
123            localStorage.setItem("theme", "dark");         // Add another key
124            localStorage.clear();                          // Clear all data
125        }
126    </script>
127</body>
128
129</html>

javascript-web-storage.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101
102    body.dark {
103        background-color: black;
104        color: white;
105    }
106  </style>
107</head>
108<body>
109    <div class="container">
110        <h1>JavaScript Console</h1>
111        <button id="executeBtn">Execute</button>
112        <div id="output"></div>
113    </div>
114
115    <div class="container">
116        <h1>IFrame Sample</h1>
117        <iframe src="javascript-web-storage-iframe.html" style="width: 100%;"></iframe>
118    </div>
119
120    <script>
121        // Override console.log to display messages in the #output element
122        (function () {
123            // Override console.log
124            const originalLog = console.log;
125            console.log = function (...args) {
126                originalLog.apply(console, args);
127                const message = document.createElement('div');
128                message.textContent = args.map(String).join(' ');
129                output.appendChild(message);
130            };
131
132            // Override console.error
133            const originalError = console.error;
134            console.error = function (...args) {
135                originalError.apply(console, args);
136                const message = document.createElement('div');
137                message.textContent = args.map(String).join(' ');
138                message.style.color = 'red'; // Color error messages red
139                output.appendChild(message);
140            };
141        })();
142
143        document.getElementById('executeBtn').addEventListener('click', () => {
144            // Prevent multiple loads
145            if (document.getElementById('externalScript')) return;
146
147            const script = document.createElement('script');
148            script.src = 'javascript-web-storage.js';
149            script.id = 'externalScript';
150            //script.onload = () => console.log('javascript-web-storage.js loaded and executed.');
151            //script.onerror = () => console.log('Failed to load javascript-web-storage.js.');
152            document.body.appendChild(script);
153        });
154    </script>
155</body>
156</html>

JavaScript e `Web Storage`

O que é `Web Storage`?

Web Storage é uma API para armazenar dados no lado do cliente (no navegador do usuário). Ao contrário dos Cookies, o Web Storage não é enviado com as requisições HTTP e possui uma capacidade de armazenamento maior, tornando o gerenciamento de dados mais eficiente.

Web Storage oferece dois tipos de áreas de armazenamento, que podem ser usadas conforme a finalidade.

localStorage localStorage é uma área de armazenamento persistente. Os dados são mantidos mesmo após fechar o navegador ou reiniciar o computador. É adequado para armazenar dados de longo prazo, como configurações do usuário ou status de login.
sessionStorage sessionStorage é uma área de armazenamento temporária. É válido apenas dentro da mesma aba, e embora os dados persistam após recarregar a página, eles são automaticamente excluídos quando a aba ou janela é fechada. É adequado para manter estados temporários entre páginas.

Ambos armazenam dados como pares chave-valor (strings).

Uso Básico

Armazenando dados

Os dados podem ser armazenados da seguinte forma:.

1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");

Use o método setItem para armazenar pares chave-valor no localStorage ou sessionStorage.

Recuperando dados

Os dados podem ser recuperados da seguinte forma:.

1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"

Use getItem() para ler o valor armazenado.

Excluindo dados

Os dados podem ser excluídos da seguinte forma:.

1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();

Use removeItem() ou clear() para excluir os dados armazenados.
- removeItem() exclui apenas os dados correspondentes à chave especificada.
- clear() exclui todos os dados armazenados.

Salvando e restaurando objetos

Web Storage só pode armazenar strings. Portanto, ao salvar objetos, você deve convertê-los em strings usando JSON.stringify() e restaurá-los com JSON.parse() ao ler.

 1const user = {
 2    name: "JohnDoe",
 3    age: 30
 4};
 5
 6// Save (serialize)
 7localStorage.setItem("user", JSON.stringify(user));
 8
 9// Retrieve (deserialize)
10const savedUser = JSON.parse(localStorage.getItem("user"));
11console.log(savedUser.name); // "JohnDoe"

Converta um objeto em uma string com JSON.stringify() antes de salvar e restaure-o com JSON.parse().

Demonstração da diferença entre localStorage e sessionStorage

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <title>Web Storage Demo</title>
 5    </head>
 6    <body>
 7        <input id="input" placeholder="Type your name..." />
 8        <button onclick="saveToLocal()">Save to localStorage</button>
 9        <button onclick="saveToSession()">Save to sessionStorage</button>
10        <button onclick="showValues()">Show Stored Values</button>
11
12        <script>
13            function saveToLocal() {
14                const value = document.getElementById("input").value;
15                localStorage.setItem("name", value);
16                alert("Saved to localStorage");
17            }
18
19            function saveToSession() {
20                const value = document.getElementById("input").value;
21                sessionStorage.setItem("name", value);
22                alert("Saved to sessionStorage");
23            }
24
25            function showValues() {
26                const local = localStorage.getItem("name");
27                const session = sessionStorage.getItem("name");
28
29                alert(`localStorage: ${local}\nsessionStorage: ${session}`);
30            }
31        </script>
32    </body>
33</html>

 1function saveToLocal() {
 2    const value = document.getElementById("input").value;
 3    localStorage.setItem("name", value);
 4    alert("Saved to localStorage");
 5}
 6
 7function saveToSession() {
 8    const value = document.getElementById("input").value;
 9    sessionStorage.setItem("name", value);
10    alert("Saved to sessionStorage");
11}
12
13function showValues() {
14    const local = localStorage.getItem("name");
15    const session = sessionStorage.getItem("name");
16
17    alert(`localStorage: ${local}\nsessionStorage: ${session}`);
18}

Este código é uma demonstração simples que armazena o nome digitado em localStorage ou sessionStorage e permite verificar seus valores.

Monitorando eventos de armazenamento

Ao acessar o mesmo localStorage em diferentes abas, você pode monitorar o evento storage em uma aba quando os dados são alterados em outra.

1window.addEventListener("storage", function(event) {
2    console.log("Storage changed!");
3    console.log(`Key: ${event.key}`);
4    console.log(`Old Value: ${event.oldValue}`);
5    console.log(`New Value: ${event.newValue}`);
6});

Este evento se aplica apenas ao localStorage e não ocorre com o sessionStorage.

1// Test operations
2localStorage.setItem("username", "Alice");     // Save new value
3localStorage.setItem("username", "Bob");       // Update value
4localStorage.removeItem("username");           // Remove key
5localStorage.setItem("theme", "dark");         // Add another key
6localStorage.clear();                          // Clear all data

O evento storage não é disparado na mesma aba, portanto, você pode observá-lo quando o localStorage é modificado a partir de outra aba ou janela.

Exemplo prático: salvando o estado do modo escuro

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <style>
 5        body.dark {
 6            background-color: black;
 7            color: white;
 8        }
 9    </style>
10</head>
11<body>
12    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
13
14    <script>
15        // Load the initial state
16        if (localStorage.getItem("darkMode") === "true") {
17            document.body.classList.add("dark");
18        }
19
20        function toggleDarkMode() {
21            const isDark = document.body.classList.toggle("dark");
22            localStorage.setItem("darkMode", isDark);
23        }
24    </script>
25</body>
26</html>

 1// Load the initial state
 2if (localStorage.getItem("darkMode") === "true") {
 3    document.body.classList.add("dark");
 4}
 5
 6function toggleDarkMode() {
 7    const isDark = document.body.classList.toggle("dark");
 8    localStorage.setItem("darkMode", isDark);
 9}
10
11toggleDarkMode();

Neste exemplo, cada clique no botão alterna o modo escuro ativado/desativado, com o estado salvo no localStorage e restaurado na próxima visita.

Limites e considerações de armazenamento

Ao usar o Web Storage, os seguintes pontos devem ser considerados:.

Limite de armazenamento Ele varia conforme o navegador e ambiente, mas geralmente é em torno de 5MB.
Segurança Como é acessível diretamente do JavaScript, não é adequado para armazenar informações sensíveis.
Conversão de dados para string Todos os dados são armazenados automaticamente como strings, portanto, a informação do tipo não é preservada.

1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）

Resumo

Web Storage é um recurso muito útil para armazenar dados temporária ou permanentemente no lado do cliente em aplicações web. É importante entender as diferenças e o uso do localStorage e do sessionStorage, além de aprender como usar JSON.stringify e JSON.parse para salvar e restaurar dados. Quando usado corretamente, pode melhorar muito a experiência do usuário.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

JavaScript e Cookies JavaScript e IndexedDB

JavaScript e `Web Storage`

YouTube Video

JavaScript e Web Storage

O que é Web Storage?

Uso Básico

Armazenando dados

Recuperando dados

Excluindo dados

Salvando e restaurando objetos

Demonstração da diferença entre localStorage e sessionStorage

Monitorando eventos de armazenamento

Exemplo prático: salvando o estado do modo escuro

Limites e considerações de armazenamento

Resumo

YouTube Video

JavaScript e `Web Storage`

O que é `Web Storage`?