HTML वेब स्टोरेज
In this page:
localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");Web Storage क्या है?
Web Storage एक स्टैंडर्ड ब्राउज़र API है जिसे डेटा को साधारण key-value पेयर्स के रूप में लोकल रूप से सेव करने के लिए डिज़ाइन किया गया है।
यह असंवेदनशील डेटा स्टोर करने के लिए पारंपरिक कुकीज़ की जगह लेता है, और इसमें बेहतर परफॉर्मेंस, बेहतर सिक्योरिटी, और कहीं ज़्यादा स्टोरेज क्षमता (5MB तक) मिलती है।
उदाहरण: What is Web Storage?
<script>
localStorage.setItem('username', 'Alex');
</script>localStorage से Persistent Storage
localStorage ऑब्जेक्ट यूज़र के डिवाइस पर डेटा को स्थायी रूप से सेव करता है। इस डेटा की कोई एक्सपायरी डेट नहीं होती; यह तब भी सेव रहता है जब यूज़र अपने टैब बंद करे, ब्राउज़र रीस्टार्ट करे, या डिवाइस शटडाउन करे।
उदाहरण: Persistent Storage with localStorage
<script>
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));
</script>sessionStorage से Temporary Storage
sessionStorage ऑब्जेक्ट बिल्कुल localStorage की तरह काम करता है, लेकिन यह अस्थायी होता है। डेटा सिर्फ पेज सेशन की अवधि के लिए सेव रहता है, यानी जैसे ही यूज़र अपना ब्राउज़र टैब बंद करता है, वह डिलीट हो जाता है।
उदाहरण: Temporary Storage with sessionStorage
<script>
sessionStorage.setItem('formProgress', 'step2');
console.log(sessionStorage.getItem('formProgress'));
</script>JSON का उपयोग करके स्ट्रक्चर्ड डेटा सेव करना
Web Storage सिर्फ साधारण स्ट्रिंग्स के रूप में डेटा स्टोर कर सकता है। कॉम्प्लेक्स डेटा स्ट्रक्चर्स (जैसे arrays या objects) सेव करने के लिए, आपको सेव करने से पहले JSON.stringify का उपयोग करके उन्हें JSON स्ट्रिंग में बदलना होगा, और वापस पाते समय JSON.parse से उन्हें पार्स करना होगा।
उदाहरण: Saving Structured Data using JSON
<script>
const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
const saved = JSON.parse(localStorage.getItem('settings'));
</script>स्टोरेज स्पेस को क्लियर और मैनेज करना
अपने स्टोरेज स्पेस को व्यवस्थित रखने और ब्राउज़र की सीमाओं के भीतर रहने के लिए, आपको नियमित रूप से पुराने या अनुपयोगी डेटा को साफ करते रहना चाहिए। आप removeItem का उपयोग करके specific आइटम्स डिलीट कर सकते हैं, या clear मेथड से पूरे स्टोरेज एरिया को साफ कर सकते हैं।
उदाहरण: Clearing and Managing Storage Space
<script>
localStorage.removeItem('theme');
localStorage.clear();
</script>प्रति ब्राउज़र स्टोरेज सीमाएँ
ज़्यादातर मॉडर्न ब्राउज़र localStorage और sessionStorage दोनों के लिए प्रति origin लगभग 5 से 10 मेगाबाइट स्टोरेज की अनुमति देते हैं, हालांकि Chrome, Firefox और Safari के बीच सटीक सीमा थोड़ी अलग-अलग होती है।
यह सेटिंग्स और छोटे कैश्ड डेटा के लिए पर्याप्त है, लेकिन बड़ी फाइल्स या मीडिया स्टोर करने के लिए बहुत कम है।
उदाहरण: Storage Limits Per Browser
<script>
try {
localStorage.setItem('data', 'x'.repeat(10000000));
} catch (e) {
console.log('QuotaExceededError:', e.message);
}
</script>Storage Events सुनना
storage इवेंट उसी साइट के दूसरे खुले टैब्स या विंडोज़ में तब फायर होता है जब उनमें से किसी एक में localStorage बदलता है, जिससे आप कई टैब्स को सिंक में रख सकते हैं।
खास बात यह है कि यह इवेंट उसी टैब में फायर नहीं होता जिसने बदलाव किया, बल्कि सिर्फ उसी origin को सुनने वाले दूसरे टैब्स में फायर होता है।
उदाहरण: Listening for Storage Events
<script>
window.addEventListener('storage', function (event) {
console.log(event.key, event.newValue);
});
</script>Cookies बनाम localStorage
कुकीज़ हर एक HTTP रिक्वेस्ट के साथ अपने-आप सर्वर को भेजी जाती हैं, इनकी साइज़ सीमा लगभग 4 किलोबाइट्स जितनी बहुत छोटी होती है, और इनकी एक एक्सपायरी डेट हो सकती है। localStorage कभी अपने-आप सर्वर को नहीं भेजा जाता, इसमें कहीं ज़्यादा डेटा रखा जा सकता है, और यह स्पष्ट रूप से क्लियर न किए जाने तक बना रहता है, जिससे यह UI प्रेफरेंस जैसे सिर्फ client-only डेटा के लिए कहीं ज़्यादा उपयुक्त है।
उदाहरण: Cookies vs localStorage
<script>
document.cookie = "token=abc123";
localStorage.setItem('uiTheme', 'dark');
</script>- sensitive user passwords या payment details को web storage में save करना, जिससे वे theft के लिए vulnerable रहते हैं।
- raw JavaScript objects को पहले JSON strings में convert किए बिना सीधे save करने की कोशिश करना।
- browser की 5MB storage limit पार करना, जिससे आपके save scripts errors throw करते हैं और fail हो जाते हैं।
- Web Storage websites को user के browser के अंदर locally key-value pairs के रूप में data save करने देता है।
- कभी expire न होने वाला persistent data save करने के लिए localStorage, और temporary, session-bound data के लिए sessionStorage इस्तेमाल करें।
- save करने से पहले complex data structures (जैसे arrays या objects) को JSON strings में convert करें, और retrieve करते समय उन्हें वापस parse करें।
standard Web Storage APIs सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: