JavaScript and `Web Storage`
This article explains JavaScript and Web Storage.
Web Storage is a powerful and simple mechanism for storing data in the browser, consisting mainly of two types: localStorage and sessionStorage. We will explain their differences, usage, and practical sample code step by step.
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 & 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 and Web Storage
What is Web Storage?
Web Storage is an API for storing data on the client side (the user’s browser). Unlike Cookies, Web Storage is not sent with HTTP requests and has a larger storage capacity, making data management more efficient.
Web Storage provides two types of storage areas, which can be used according to the purpose.
-
localStoragelocalStorageis a persistent storage area. Data is retained even after closing the browser or restarting the PC. It is suitable for storing long-term data such as user settings or login status. -
sessionStoragesessionStorageis a temporary storage area. It is valid only within the same tab, and while the data persists after reloading the page, it is automatically deleted when the tab or window is closed. It is suitable for maintaining temporary states between pages.
Both store data as key-value pairs (strings).
Basic Usage
Storing Data
Data can be stored as follows:.
1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");- Use the
setItemmethod to store key-value pairs inlocalStorageorsessionStorage.
Retrieving Data
Data can be retrieved as follows:.
1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"
- Use
getItem()to read the stored value.
Deleting Data
Data can be deleted as follows:.
1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();- Use
removeItem()orclear()to delete the stored data.removeItem()deletes only the data corresponding to the specified key.clear()deletes all stored data.
Saving and Restoring Objects
Web Storage can only store strings. Therefore, when saving objects, you must convert them to strings using JSON.stringify() and restore them with JSON.parse() when reading.
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"
- Convert an object to a string with
JSON.stringify()before saving, and restore it withJSON.parse().
Demo of the Difference Between localStorage and 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}- This code is a simple demo that stores the entered name in either
localStorageorsessionStorageand lets you check their values.
Monitoring Storage Events
When accessing the same localStorage across different tabs, you can monitor the storage event in one tab when data is changed in another.
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});- This event applies only to
localStorageand does not occur withsessionStorage.
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
- The
storageevent does not fire within the same tab, so you can observe it whenlocalStorageis modified from another tab or window.
Practical Example: Saving Dark Mode State
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();- In this example, each button click toggles dark mode ON/OFF, with the state saved in
localStorageand restored on the next visit.
Storage Limits and Considerations
When using Web Storage, the following points should be considered:.
-
Storage Limit It varies depending on the browser and environment, but is usually around 5MB.
-
Security Since it is directly accessible from JavaScript, it is not suitable for storing sensitive information.
-
Data String Conversion All data is automatically stored as strings, so type information is not preserved.
1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）
Summary
Web Storage is a very useful feature for temporarily or permanently storing data on the client side in web applications. It is important to understand the differences and usage of localStorage and sessionStorage, and to learn how to use JSON.stringify and JSON.parse for saving and restoring data. When used properly, it can greatly enhance the user experience.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.