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 के लिए कोड
} अन्यथा {
    // माफ करें! 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");

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

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

उदाहरण

यदि (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} अन्यथा {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "आपने इस बटन को " +
localStorage.clickcount + " बार.";

स्वयं प्रयोग कीजिए

sessionStorage ऑब्जेक्ट

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

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

उदाहरण

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

स्वयं प्रयोग कीजिए