JavaScript và `Web Storage`

Articles

Bài viết này giải thích về JavaScript và Web Storage.

Web Storage là một cơ chế mạnh mẽ và đơn giản để lưu trữ dữ liệu trên trình duyệt, chủ yếu bao gồm hai loại: localStorage và sessionStorage. Chúng tôi sẽ giải thích sự khác biệt, cách sử dụng và các ví dụ mã thực tế từng bước.

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 và `Web Storage`

`Web Storage` là gì?

Web Storage là một API để lưu trữ dữ liệu phía máy khách (trình duyệt của người dùng). Khác với Cookies, Web Storage không được gửi kèm theo các yêu cầu HTTP và có dung lượng lưu trữ lớn hơn, giúp quản lý dữ liệu hiệu quả hơn.

Web Storage cung cấp hai loại khu vực lưu trữ, có thể sử dụng phù hợp với mục đích.

localStorage localStorage là khu vực lưu trữ lâu dài. Dữ liệu sẽ được giữ lại ngay cả sau khi đóng trình duyệt hoặc khởi động lại máy tính. Nó phù hợp để lưu trữ các dữ liệu dài hạn như cài đặt của người dùng hoặc trạng thái đăng nhập.
sessionStorage sessionStorage là khu vực lưu trữ tạm thời. Nó chỉ có hiệu lực trong cùng một tab, dữ liệu vẫn còn ngay cả khi tải lại trang nhưng sẽ tự động bị xóa khi đóng tab hoặc cửa sổ trình duyệt. Nó phù hợp để duy trì trạng thái tạm thời giữa các trang.

Cả hai đều lưu trữ dữ liệu dưới dạng cặp khóa-giá trị (chuỗi).

Cách sử dụng cơ bản

Lưu trữ dữ liệu

Dữ liệu có thể được lưu trữ như sau:.

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

Sử dụng phương thức setItem để lưu trữ các cặp key-value trong localStorage hoặc sessionStorage.

Lấy dữ liệu

Dữ liệu có thể được lấy như sau:.

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

Sử dụng getItem() để đọc giá trị đã lưu.

Xóa dữ liệu

Dữ liệu có thể được xóa như sau:.

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

Sử dụng removeItem() hoặc clear() để xóa dữ liệu đã lưu.
- removeItem() chỉ xóa dữ liệu tương ứng với key đã chỉ định.
- clear() xóa toàn bộ dữ liệu đã lưu trữ.

Lưu và khôi phục đối tượng

Web Storage chỉ có thể lưu trữ chuỗi. Do đó, khi lưu đối tượng, bạn phải chuyển đổi chúng thành chuỗi bằng JSON.stringify() và khôi phục bằng JSON.parse() khi đọc.

 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"

Chuyển đổi một đối tượng thành chuỗi bằng JSON.stringify() trước khi lưu, và khôi phục nó bằng JSON.parse().

Trình diễn sự khác biệt giữa localStorage và 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}

Đoạn mã này là một trình diễn đơn giản lưu tên bạn nhập vào localStorage hoặc sessionStorage và cho phép bạn kiểm tra giá trị của chúng.

Giám sát các sự kiện lưu trữ

Khi truy cập cùng một localStorage trên các tab khác nhau, bạn có thể giám sát sự kiện storage trên một tab khi dữ liệu thay đổi ở tab khác.

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});

Sự kiện này chỉ áp dụng cho localStorage và không xảy ra với 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

Sự kiện storage không được kích hoạt trong cùng một tab, vì vậy bạn chỉ có thể quan sát nó khi localStorage được thay đổi từ tab hoặc cửa sổ khác.

Ví dụ thực tế: Lưu trạng thái chế độ tối (dark mode)

 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();

Trong ví dụ này, mỗi lần nhấn nút sẽ chuyển đổi chế độ tối BẬT/TẮT, trạng thái này được lưu trong localStorage và được khôi phục khi bạn truy cập lần sau.

Giới hạn lưu trữ và các lưu ý

Khi sử dụng Web Storage, bạn cần lưu ý các điểm sau:.

Giới hạn lưu trữ Giới hạn này tùy thuộc vào trình duyệt và môi trường, nhưng thường là khoảng 5MB.
Bảo mật Do có thể truy cập trực tiếp từ JavaScript, nên không phù hợp để lưu trữ thông tin nhạy cảm.
Chuyển đổi dữ liệu thành chuỗi Tất cả dữ liệu đều được lưu trữ tự động dưới dạng chuỗi, nên thông tin về kiểu dữ liệu sẽ không được giữ lại.

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

Tóm tắt

Web Storage là một tính năng rất hữu ích để lưu trữ tạm thời hoặc vĩnh viễn dữ liệu phía máy khách trong các ứng dụng web. Điều quan trọng là phải hiểu sự khác biệt và cách sử dụng localStorage và sessionStorage, cũng như cách sử dụng JSON.stringify và JSON.parse để lưu và khôi phục dữ liệu. Nếu sử dụng đúng cách, nó có thể cải thiện đáng kể trải nghiệm của người dùng.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

JavaScript và Cookie JavaScript và IndexedDB

JavaScript và `Web Storage`

YouTube Video

JavaScript và Web Storage

Web Storage là gì?

Cách sử dụng cơ bản

Lưu trữ dữ liệu

Lấy dữ liệu

Xóa dữ liệu

Lưu và khôi phục đối tượng

Trình diễn sự khác biệt giữa localStorage và sessionStorage

Giám sát các sự kiện lưu trữ

Ví dụ thực tế: Lưu trạng thái chế độ tối (dark mode)

Giới hạn lưu trữ và các lưu ý

Tóm tắt

YouTube Video

JavaScript và `Web Storage`

`Web Storage` là gì?