जावास्क्रिप्ट और `वेब स्टोरेज`
यह लेख जावास्क्रिप्ट और वेब स्टोरेज को समझाता है।
वेब स्टोरेज ब्राउज़र में डेटा स्टोर करने के लिए एक शक्तिशाली और सरल तरीका है, जो मुख्य रूप से दो प्रकार का होता है: localStorage और sessionStorage। हम इनके अंतर, उपयोग और व्यावहारिक उदाहरण कोड को चरणबद्ध तरीके से समझाएंगे।
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>जावास्क्रिप्ट और वेब स्टोरेज
वेब स्टोरेज क्या है?
वेब स्टोरेज क्लाइंट साइड (यूज़र के ब्राउज़र) में डेटा स्टोर करने के लिए एक एपीआई है। Cookies के विपरीत, Web Storage HTTP अनुरोधों के साथ नहीं भेजा जाता है और इसकी संग्रह क्षमता अधिक होती है, जिससे डेटा प्रबंधन अधिक कुशल बनता है।
Web Storage दो प्रकार के स्टोरेज क्षेत्र प्रदान करता है, जिन्हें उद्देश्य के अनुसार उपयोग किया जा सकता है।
-
localStoragelocalStorageएक स्थायी संग्रहण क्षेत्र है। ब्राउज़र बंद करने या पीसी रीस्टार्ट करने के बाद भी डेटा सुरक्षित रहता है। यह उपयोगकर्ता सेटिंग्स या लॉगिन स्थिति जैसे दीर्घकालिक डेटा को स्टोर करने के लिए उपयुक्त है। -
sessionStoragesessionStorageएक अस्थायी संग्रहण क्षेत्र है। यह केवल उसी टैब के भीतर वैध है, पेज को रीलोड करने के बाद भी डेटा रहता है, लेकिन टैब या विंडो बंद करने पर इसे स्वचालित रूप से हटा दिया जाता है। यह पृष्ठों के बीच अस्थायी स्थिति बनाए रखने के लिए उपयुक्त है।
दोनों डेटा को कुंजी-मूल्य जोड़े (स्ट्रिंग) के रूप में स्टोर करते हैं।
मूल उपयोग
डेटा स्टोर करना
डेटा को इस प्रकार स्टोर किया जा सकता है:।
1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");localStorageयाsessionStorageमें कुंजी-मूल्य जोड़ियाँ संग्रहीत करने के लिएsetItemविधि का उपयोग करें।
डेटा प्राप्त करना
डेटा को इस प्रकार प्राप्त किया जा सकता है:।
1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"
- संग्रहीत मान को पढ़ने के लिए
getItem()का उपयोग करें।
डेटा हटाना
डेटा को इस प्रकार हटाया जा सकता है:।
1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();- संग्रहीत डेटा को हटाने के लिए
removeItem()याclear()का उपयोग करें।removeItem()केवल निर्दिष्ट कुंजी से संबंधित डेटा को ही हटाता है।clear()सभी संग्रहीत डेटा को हटा देता है।
ऑब्जेक्ट को सेव और पुनर्स्थापित करना
Web Storage केवल स्ट्रिंग्स को ही स्टोर कर सकता है। इसलिए, जब आप ऑब्जेक्ट सेव करते हैं, तो आपको उन्हें JSON.stringify() का उपयोग करके स्ट्रिंग में बदलना होगा और पढ़ते समय JSON.parse() से पुनर्स्थापित करना होगा।
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"
- सहेजने से पहले किसी ऑब्जेक्ट को
JSON.stringify()के साथ स्ट्रिंग में बदलें, और पुनः प्राप्त करने के लिएJSON.parse()का उपयोग करें।
localStorage और 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}- यह कोड एक सरल डेमो है जो दर्ज किए गए नाम को या तो
localStorageयाsessionStorageमें स्टोर करता है और आपको उनका मान जांचने की सुविधा देता है।
स्टोरेज इवेंट्स की निगरानी करना
जब आप विभिन्न टैब्स में एक ही localStorage एक्सेस करते हैं, तो किसी एक टैब में डेटा बदलने पर आप दूसरे टैब में storage इवेंट की निगरानी कर सकते हैं।
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});- यह इवेंट केवल
localStorageपर लागू होता है और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
storageइवेंट एक ही टैब में ट्रिगर नहीं होता है, इसलिए आप इसे तभी देख सकते हैं जबlocalStorageको किसी अन्य टैब या विंडो से बदला जाता है।
व्यावहारिक उदाहरण: डार्क मोड स्थिति सहेजना
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();- इस उदाहरण में, प्रत्येक बटन क्लिक डार्क मोड को चालू/बंद करता है, जिसकी स्थिति
localStorageमें संग्रहीत होती है और अगली बार विज़िट पर पुनर्स्थापित की जाती है।
संग्रहण सीमाएँ और विचार
Web Storage का उपयोग करते समय निम्नलिखित बिंदुओं पर विचार करना चाहिए:।
-
संग्रहण सीमा यह ब्राउज़र और परिवेश पर निर्भर करता है, लेकिन सामान्यतः लगभग 5MB होती है।
-
सुरक्षा चूंकि यह जावास्क्रिप्ट से सीधे उपलब्ध है, यह संवेदनशील जानकारी स्टोर करने के लिए उपयुक्त नहीं है।
-
डेटा स्ट्रिंग रूपांतरण सारा डेटा स्वतः ही स्ट्रिंग के रूप में संग्रहीत होता है, इसलिए टाइप जानकारी संरक्षित नहीं रहती।
1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）
सारांश
Web Storage वेब एप्लिकेशन में क्लाइंट साइड पर डेटा को अस्थायी या स्थायी रूप से स्टोर करने के लिए बहुत उपयोगी सुविधा है। localStorage और sessionStorage के अंतर और उपयोग को समझना, तथा डेटा को सेव और पुनर्स्थापित करने के लिए JSON.stringify और JSON.parse का उपयोग सीखना महत्वपूर्ण है। यदि सही तरीके से उपयोग किया जाए, तो यह उपयोगकर्ता अनुभव को बहुत बेहतर बना सकता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।