HTML स्थानीय संग्रहण

HTML स्थानीय संग्रहण: कुकी से बेहतर

HTML स्थानीय संग्रहण क्या है?

स्थानीय संग्रहण (Local Storage) के माध्यम से, वेब अनुप्रयोग उपयोगकर्ता ब्राउज़र में डाटा का स्थानीय संग्रहण कर सकते हैं।

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

कुकी के विपरीत, संग्रहण सीमा बहुत अधिक है (कम से कम 5MB), और सूचना सर्वर पर नहीं भेजी जाती है।

स्थानीय संग्रहण ओरिजिन (origin) (डोम एंड प्रोटोकॉल) से होकर होता है। सभी पृष्ठ, ओरिजिन से, एकसी डाटा को संग्रहण और अधिग्रहण कर सकते हैं।

ब्राउज़र समर्थन

ग्रिड में दिखाए गए एक्सेस्सेस का आकड़ा, स्थानीय स्टोरेज का पूर्ण समर्थन करने वाले पहले ब्राउज़र संस्करण को सूचित करता है。

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML स्थानीय स्टोरेज ऑब्जेक्ट

HTML स्थानीय स्टोरेज दो ऑब्जेक्ट प्रदान करता है जो कि क्लायंट पर डाटा स्टोर करने के लिए है:

  • window.localStorage - बिना अंतिम तारीख के डाटा स्टोर करता है
  • window.sessionStorage - एक सत्र के लिए डाटा स्टोर करता है (जब ब्राउज़र टैब बंद कर दिया जाता है, तो डाटा खो जाता है)

स्थानीय स्टोरेज का उपयोग करते समय, localStorage और sessionStorage के ब्राउज़र समर्थन की जांच करें:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage के लिए कोड
} else {
    // माफ करें! Web Storage का समर्थन नहीं है ..
}

localStorage ऑब्जेक्ट

localStorage ऑब्जेक्ट में स्टोर की गई डाटा बिना अंतिम तारीख के है। जब ब्राउज़र बंद कर दिया जाता है, तो डाटा नहीं हटता है और यह अगले दिन, सप्ताह या वर्ष के दौरान उपलब्ध रहता है。

उदाहरण

// स्टोर किया गया
localStorage.setItem("lastname", "Gates");
// ले लिया गया
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

स्वयं प्रयोग करें

उदाहरण व्याख्या:

  • localStorage नाम/मान जो कि name="lastname" और value="Gates" के रूप में है
  • "lastname" का मान ले लिया जाता है और इसे id="result" के एलीमेंट में लगा दिया जाता है

इस उदाहरण को इस तरह भी लिखा जा सकता है:

// स्टोर किया गया
localStorage.lastname = "Gates";
// ले लिया गया
document.getElementById("result").innerHTML = localStorage.lastname;

इस प्रकार, "lastname" localStorage पद को हटाने के लिए वाक्यविन्यास निम्नलिखित है:

localStorage.removeItem("lastname");

टिप्पणी: नाम/मान अक्षरयुक्ति के रूप में हमेशा स्टोर किया जाता है। अगर आपको इसे अन्य रूप में बदलना है, तो याद रखें!

इस उदाहरण में, उपयोगकर्ता द्वारा बटन पर क्लिक करने की संख्या को गिना जाता है। कोड में, मान वाक्यच्छेद को संख्या में बदला जाता है और गिनावाली को एक एक बढ़ाया जाता है:

उदाहरण

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "आपने इस बटन को " +
localStorage.clickcount + " बार.";

स्वयं प्रयोग करें

sessionStorage ऑब्जैक्ट

sessionStorage ऑब्जैक्ट localStorage ऑब्जैक्ट के समान है, अंतर का यह है कि यह केवल एक session के लिए डाटा संग्रह करता है।यदि उपयोगकर्ता विशिष्ट ब्राउज़र टैब को बंद करता है, तो डाटा भी मिट जाता है。

नीचे दिए गए उदाहरण में, वर्तमान session में उपयोगकर्ता के बटन क्लिक की गिनती की जाती है:

उदाहरण

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "इस session में, आपने इस बटन को " +
sessionStorage.clickcount + " बार.";

स्वयं प्रयोग करें