HTML5 - वेब स्टोरेज

एचटीएमएल 5 क्लाइंट सत्र पर संरचित डेटा को संग्रहीत करने और निम्नलिखित कमियों को दूर करने के लिए, HTTP सत्र कुकीज़ के समान दो तंत्रों का परिचय देता है।

कुकीज़ हर HTTP अनुरोध के साथ शामिल होती हैं, जिससे उसी डेटा को संचारित करके आपके वेब एप्लिकेशन को धीमा कर दिया जाता है।
हर HTTP अनुरोध के साथ कुकीज़ शामिल हैं, जिससे इंटरनेट पर अनएन्क्रिप्टेड डेटा भेजा जाता है।
कुकीज़ लगभग 4 KB डेटा तक सीमित हैं। आवश्यक डेटा संग्रहीत करने के लिए पर्याप्त नहीं है।

दो मंजिले हैं session storage तथा local storage और उनका उपयोग विभिन्न स्थितियों को संभालने के लिए किया जाएगा।

हर ब्राउज़र का नवीनतम संस्करण इंटरनेट एक्सप्लोरर सहित HTML5 स्टोरेज का समर्थन करता है।

सत्र भंडारण

सत्र संग्रह परिदृश्यों जहां उपयोगकर्ता बाहर एक एकल लेनदेन ले जा रहा है के लिए डिज़ाइन किया गया है, लेकिन एक ही समय में अलग अलग खिड़कियों में अनेक लेन-देन से बाहर ले जाने जा सकता है।

उदाहरण

उदाहरण के लिए, यदि कोई उपयोगकर्ता एक ही साइट का उपयोग करके दो अलग-अलग खिड़कियों में हवाई जहाज का टिकट खरीदता है। यदि साइट उपयोगकर्ता द्वारा खरीदे जाने वाले टिकट को ट्रैक करने के लिए कुकीज़ का उपयोग करती है, तो जैसा कि उपयोगकर्ता दोनों खिड़कियों में पृष्ठ से पृष्ठ पर क्लिक करता है, वर्तमान में खरीदा जा रहा टिकट एक खिड़की से दूसरी खिड़की तक "लीक" होगा, संभवतः उपयोगकर्ता को पैदा करने के लिए वास्तव में सूचना के बिना एक ही उड़ान के लिए दो टिकट खरीदें।

एचटीएमएल 5 सत्र स्टॉरेज विशेषता का परिचय देता है जो कि सत्र भंडारण में डेटा जोड़ने के लिए साइटों द्वारा उपयोग किया जाएगा, और यह उस विंडो में खोले गए उसी साइट से किसी भी पृष्ठ पर पहुंच योग्य होगा, अर्थातsession और जैसे ही आप खिड़की बंद करते हैं, सत्र खो जाता है।

निम्नलिखित कोड है जो एक सत्र चर सेट करेगा और उस चर तक पहुंच देगा -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

स्थानीय भंडार

स्थानीय संग्रह है कि spans एकाधिक विंडो भंडारण के लिए बनाया गया है, और वर्तमान सत्र से बाहर रहता है। विशेष रूप से, वेब एप्लिकेशन उपयोगकर्ता डेटा के मेगाबाइट्स, जैसे संपूर्ण उपयोगकर्ता-लेखक दस्तावेज़ या उपयोगकर्ता के मेलबॉक्स को प्रदर्शन कारणों से क्लाइंट साइड पर संग्रहीत करना चाह सकते हैं।

फिर से, कुकीज़ इस मामले को अच्छी तरह से नहीं संभालती हैं, क्योंकि वे हर अनुरोध के साथ प्रेषित होते हैं।

उदाहरण

HTML5 लोकलस्टोरेज विशेषता का परिचय देता है जिसका उपयोग बिना समय सीमा के किसी पृष्ठ के स्थानीय संग्रहण क्षेत्र तक पहुंचने के लिए किया जाएगा और जब भी आप उस पृष्ठ का उपयोग करेंगे तो यह स्थानीय संग्रहण उपलब्ध होगा।

निम्नलिखित कोड है जो एक स्थानीय संग्रहण चर सेट करेगा और उस चर को हर बार इस पृष्ठ तक पहुंचने पर, यहां तक कि अगली बार, जब आप विंडो खोलते हैं -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

वेब संग्रहण हटाएं

स्थानीय मशीन पर संवेदनशील डेटा संग्रहीत करना खतरनाक हो सकता है और सुरक्षा छेद छोड़ सकता है।

सत्र संग्रह डाटा ब्राउज़र द्वारा हटा दिया जाएगा तुरंत बाद सत्र समाप्त हो जाता है।

एक स्थानीय संग्रहण सेटिंग को साफ़ करने के लिए आपको कॉल करना होगा localStorage.remove('key'); जहाँ 'कुंजी' उस मान की कुंजी है जिसे आप हटाना चाहते हैं। यदि आप सभी सेटिंग्स साफ़ करना चाहते हैं, तो आपको कॉल करना होगाlocalStorage.clear() तरीका।

निम्नलिखित कोड है जो स्थानीय भंडारण को पूरा करेगा -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

यह निम्नलिखित परिणाम देगा -