HTML5 ने दो तंत्र पेश किए, HTTP सेशन कुकीज़ के समान, क्लाइंट-साइड पर संरचित डेटा संग्रहीत करने के लिए और निम्न कमियों को दूर करने के लिए:
- कुकीज़ हर HTTP अनुरोध के साथ शामिल होती हैं, जिससे वही डेटा प्रसारित करके आपके वेब एप्लिकेशन को धीमा कर देती हैं।
- कुकीज़ लगभग 4 KB डेटा तक सीमित हैं। आवश्यक डेटा संग्रहीत करने के लिए पर्याप्त नहीं।
स्टोरेज के दो तंत्र सेशन स्टोरेज और लोकल स्टोरेज हैं और उनका उपयोग विभिन्न स्थितियों को संभालने के लिए किया जाएगा।
सेशन स्टोरेज
सेशन स्टोरेज उन परिदृश्यों के लिए डिज़ाइन किया गया है जहां उपयोगकर्ता एक ही लेनदेन कर रहा है लेकिन एक ही समय में अलग-अलग विंडोज़ में कई लेनदेन कर सकता है।
उदाहरण
सेशन वेरिएबल सेट करने और उस वेरिएबल को एक्सेस करने के लिए निम्न कोड चलाएं:
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if( sessionStorage.hits ){ sessionStorage.hits = Number(sessionStorage.hits) +1; } else{ sessionStorage.hits = 1; } document.write("कुल हिट्स: " + sessionStorage.hits ); </script> <p>पेज रिफ्रेश करके हिट्स की संख्या बढ़ाएं।</p> <p>विंडो बंद करें और फिर से खोलें और परिणाम जांचें।</p> </body> </html>नोट: सेशन स्टोरेज टैब/विंडो बंद होने पर क्लियर हो जाता है।
लोकल स्टोरेज
लोकल स्टोरेज उस स्टोरेज के लिए डिज़ाइन किया गया है जो कई विंडोज़ तक फैला होता है और वर्तमान सेशन से आगे रहता है। विशेष रूप से, वेब एप्लिकेशन प्रदर्शन कारणों से क्लाइंट-साइड पर मेगाबाइट्स उपयोगकर्ता डेटा संग्रहीत करना चाह सकते हैं, जैसे पूरे उपयोगकर्ता-लिखित दस्तावेज़ या उपयोगकर्ता का मेलबॉक्स।
उदाहरण
लोकल स्टोरेज वेरिएबल सेट करने और हर बार इस पेज को एक्सेस करने पर उस वेरिएबल को एक्सेस करने के लिए निम्न कोड चलाएं, यहां तक कि अगली बार जब आप विंडो खोलेंगे।
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; } else{ localStorage.hits = 1; } document.write("कुल हिट्स: " + localStorage.hits ); </script> <p>पेज रिफ्रेश करके हिट्स की संख्या बढ़ाएं।</p> <p>विंडो बंद करें और फिर से खोलें और परिणाम जांचें।</p> </body> </html>क्षमता: लगभग 5-10MB प्रति ओरिजिन। सिंक्रोनस API, बड़े डेटा के लिए IndexedDB पर विचार करें।
