जावास्क्रिप्ट और स्टोरेजमैनेजर
यह लेख जावास्क्रिप्ट और स्टोरेजमैनेजर को समझाता है।
हम StorageManager की विशेषताओं को विस्तार से समझाएंगे और इसे ब्राउज़र में वास्तव में काम करने वाले कोड उदाहरणों के साथ चरण दर चरण उपयोग करने का तरीका बताएंगे।
YouTube Video
javascript-storage-manager.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 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args
119 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120 .join(" ");
121 output.appendChild(message);
122 };
123
124 // Override console.error
125 const originalError = console.error;
126 console.error = function (...args) {
127 originalError.apply(console, args);
128 const message = document.createElement('div');
129 message.textContent = args
130 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131 .join(" ");
132 message.style.color = 'red'; // Color error messages red
133 output.appendChild(message);
134 };
135 })();
136
137 document.getElementById('executeBtn').addEventListener('click', () => {
138 // Prevent multiple loads
139 if (document.getElementById('externalScript')) return;
140
141 const script = document.createElement('script');
142 script.src = 'javascript-storage-manager.js';
143 script.id = 'externalScript';
144 //script.onload = () => console.log('javascript-storage-manager.js loaded and executed.');
145 //script.onerror = () => console.log('Failed to load javascript-storage-manager.js.');
146 document.body.appendChild(script);
147 });
148 </script>
149</body>
150</html>जावास्क्रिप्ट और स्टोरेजमैनेजर
ब्राउज़र में localStorage और IndexedDB जैसी वेब स्टोरेज सुविधाएँ, उपयोगकर्ता के डिवाइस पर एप्लिकेशन की स्थिति और डेटा को स्थानीय रूप से सहेजने के लिए आवश्यक हैं। हालांकि, यदि स्टोरेज क्षमता प्रबंधन और स्थायित्व के बारे में जानकारी पर्याप्त नहीं है, तो अप्रत्याशित डेटा हानि हो सकती है।
StorageManager एक API है जिसे उपयोगकर्ता एजेंट्स (मुख्यतः ब्राउज़र) प्रदान करते हैं, जो स्टोरेज के प्रयोग और स्थायित्व से सम्बंधित जानकारी प्राप्त करने और प्रबंधित करने के तरीके प्रदान करता है।
StorageManager क्या है?
StorageManager, जिसे navigator.storage के माध्यम से एक्सेस किया जा सकता है, निम्नलिखित मुख्य सुविधाएँ प्रदान करता है:।
- प्रयुक्त और उपलब्ध स्टोरेज की जानकारी प्राप्त करें (
navigator.storage.estimate()द्वारा)। - स्टोरेज के स्थायित्व की स्थिति जाँचे (
navigator.storage.persisted()द्वारा)। - स्टोरेज के स्थायित्व के लिए अनुरोध करें (
navigator.storage.persist()द्वारा)।
यह विशेष रूप से उपयोगी है यदि आप सर्विस वर्कर या PWA (प्रोग्रेसिव वेब ऐप्स) में स्थायी स्टोरेज सुनिश्चित करना चाहते हैं।
उपलब्धता जांचना
सबसे पहले, यह जांचें कि ब्राउज़र StorageManager का समर्थन करता है या नहीं।
1if ('storage' in navigator && 'estimate' in navigator.storage) {
2 console.log("StorageManager is supported.");
3} else {
4 console.warn("StorageManager is not supported in this browser.");
5}- आप यह जांचकर समर्थन का पता लगा सकते हैं कि
navigator.storageऑब्जेक्ट मौजूद है और उसमेंestimateमेथड है या नहीं।
स्टोरेज उपयोग प्राप्त करना
navigator.storage.estimate() का उपयोग करके, आप अपनी ऐप द्वारा उपयोग की जा रही स्टोरेज और कुल स्टोरेज कोटा प्राप्त कर सकते हैं।
1async function showStorageUsage() {
2 if (!navigator.storage || !navigator.storage.estimate) {
3 console.warn("StorageManager is not supported.");
4 return;
5 }
6
7 const { usage, quota } = await navigator.storage.estimate();
8 console.log(`Used: ${(usage / 1024 / 1024).toFixed(2)} MB`);
9 console.log(`Total: ${(quota / 1024 / 1024).toFixed(2)} MB`);
10 console.log(`Usage percentage: ${(usage / quota * 100).toFixed(2)}%`);
11}
12
13showStorageUsage();usageवर्तमान उपयोग (बाइट्स में) दर्शाता है, औरquotaअधिकतम उपलब्ध क्षमता है। आप स्टोरेज उपयोग की निगरानी कर सकते हैं ताकि यदि आपकी ऐप स्टोरेज सीमा के करीब पहुँच रही हो तो उपयोगकर्ता को सूचित किया जा सके, और भी अन्य उपयोग हैं।
स्टोरेज स्थायित्व की जांच
कई ब्राउज़रों में, स्टोरेज 'अस्थायी' के रूप में सहेजा जाता है, जिसका अर्थ है कि यदि डिस्क स्थान अपर्याप्त हो जाता है तो इसे स्वचालित रूप से मिटाया जा सकता है। persisted() मेथड का उपयोग करके, आप जांच सकते हैं कि वर्तमान स्टोरेज स्थायी है या नहीं।
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();स्टोरेज स्थायित्व के लिए अनुरोध करना
अगर यह पहले से स्थायी नहीं है, तो आप ब्राउज़र से persist() का उपयोग कर स्थायित्व के लिए अनुरोध कर सकते हैं। हालांकि, यह अनुरोध उपयोगकर्ता की स्पष्ट क्रियाओं या कुछ शर्तों के आधार पर अस्वीकार भी किया जा सकता है।
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();कई ब्राउज़रों में, निम्नलिखित शर्तों को पूरा करने से स्थायित्व स्वीकृति की संभावना बढ़ जाती है:।
- ऐप PWA के रूप में इंस्टॉल है
- उपयोगकर्ता ऐप का बार-बार उपयोग करता है
- ऐप HTTPS वातावरण में चल रही है
- स्थायित्व अनुरोध किसी स्पष्ट उपयोगकर्ता क्रिया, जैसे कि क्लिक, से जुड़ा हो
व्यावहारिक उदाहरण: जब डेटा स्थायी नहीं है, तब उपयोगकर्ता से स्थायित्व के लिए अनुरोध करना
1async function ensurePersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 if (isPersisted) {
4 console.log("Already using persistent storage.");
5 return;
6 }
7
8 const granted = await navigator.storage.persist();
9 if (granted) {
10 alert("Storage has been set to persistent.");
11 } else {
12 alert("Unable to set persistent storage. Your data may be deleted.");
13 }
14}
15
16document.querySelector("#persistButton").addEventListener("click", ensurePersistence);- इस उदाहरण में, जब उपयोगकर्ता एक बटन पर क्लिक करता है, तब स्थायित्व के लिए अनुरोध किया जाता है। एक बटन का उपयोग करने से अनुरोध उपयोगकर्ता की क्रिया के संदर्भ में किया जाता है, जिससे स्वीकृति मिलने की संभावना बढ़ जाती है।
सावधानियाँ और संगतता
navigator.storageकेवल HTTPS वातावरण में उपलब्ध है।- प्रमुख ब्राउज़र (Chrome, Edge, Firefox) इसका समर्थन करते हैं, लेकिन Safari में कुछ सुविधाएँ सीमित हैं।
quotaडिवाइस की स्टोरेज स्थिति पर निर्भर करता है, और एक ही साइट के लिए विभिन्न डिवाइसों पर इसके मान अलग-अलग हो सकते हैं।
सारांश
StorageManager का उपयोग करके, वेब एप्लिकेशन उपयोगकर्ता की स्थानीय स्टोरेज को और अधिक सुरक्षित तरीके से और रणनीतिक रूप से उपयोग कर सकते हैं। यह मुख्य रूप से निम्नलिखित सुविधाएँ प्रदान करता है:।
- आप
estimate()के साथ स्टोरेज उपयोग देख सकते हैं। - आप
persisted()के साथ स्थायित्व की स्थिति देख सकते हैं। - आप
persist()के साथ स्थायित्व के लिए अनुरोध कर सकते हैं।
PWAs या ऑफलाइन-प्रथम ऐप्स विकसित करते समय, StorageManager का उपयोग करने से आप बेहतर उपयोगकर्ता अनुभव और बेहतर डेटा सुरक्षा दोनों प्राप्त कर सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।