एचटीएमएल वेब स्टोरेज एपीआई
एचटीएमएल वेब भंडारण; कुकीज़ से बेहतर।
HTML वेब स्टोरेज क्या है?
वेब स्टोरेज के साथ, वेब एप्लिकेशन उपयोगकर्ता के ब्राउज़र में स्थानीय रूप से डेटा स्टोर कर सकते हैं।
HTML5 से पहले, एप्लिकेशन डेटा को प्रत्येक सर्वर अनुरोध में शामिल कुकीज़ में संग्रहीत किया जाना था। वेब संग्रहण अधिक सुरक्षित है, और वेबसाइट के प्रदर्शन को प्रभावित किए बिना बड़ी मात्रा में डेटा स्थानीय रूप से संग्रहीत किया जा सकता है।
कुकीज़ के विपरीत, भंडारण सीमा बहुत बड़ी है (कम से कम 5 एमबी) और जानकारी कभी भी सर्वर पर स्थानांतरित नहीं की जाती है।
वेब संग्रहण प्रति मूल (प्रति डोमेन और प्रोटोकॉल) है। सभी पेज, एक मूल से, एक ही डेटा को स्टोर और एक्सेस कर सकते हैं।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से वेब स्टोरेज का समर्थन करता है।
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
एचटीएमएल वेब स्टोरेज ऑब्जेक्ट्स
HTML वेब स्टोरेज क्लाइंट पर डेटा स्टोर करने के लिए दो ऑब्जेक्ट प्रदान करता है:
window.localStorage- बिना किसी समाप्ति तिथि के डेटा संग्रहीत करता हैwindow.sessionStorage- एक सत्र के लिए डेटा संग्रहीत करता है (ब्राउज़र टैब बंद होने पर डेटा खो जाता है)
वेब स्टोरेज का उपयोग करने से पहले, लोकलस्टोरेज और सेशनस्टोरेज के लिए ब्राउजर सपोर्ट की जांच करें:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
लोकलस्टोरेज ऑब्जेक्ट
लोकलस्टोरेज ऑब्जेक्ट बिना किसी एक्सपायरी डेट के डेटा को स्टोर करता है। ब्राउज़र बंद होने पर डेटा हटाया नहीं जाएगा, और अगले दिन, सप्ताह या वर्ष में उपलब्ध होगा।
उदाहरण
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
उदाहरण समझाया:
- नाम = "अंतिम नाम" और मान = "स्मिथ" के साथ स्थानीय स्टोरेज नाम/मान जोड़ी बनाएं
- "अंतिम नाम" का मान पुनर्प्राप्त करें और इसे आईडी = "परिणाम" के साथ तत्व में डालें
ऊपर दिया गया उदाहरण भी इस प्रकार लिखा जा सकता है:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
"अंतिम नाम" लोकलस्टोरेज आइटम को हटाने का सिंटैक्स इस प्रकार है:
localStorage.removeItem("lastname");
नोट: नाम/मूल्य जोड़े हमेशा स्ट्रिंग के रूप में संग्रहीत होते हैं। जरूरत पड़ने पर उन्हें दूसरे प्रारूप में बदलना याद रखें!
निम्न उदाहरण यह गिनता है कि उपयोगकर्ता ने कितनी बार किसी बटन पर क्लिक किया है। इस कोड में काउंटर को बढ़ाने में सक्षम होने के लिए मान स्ट्रिंग को एक संख्या में बदल दिया जाता है:
उदाहरण
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
सत्र भंडारण वस्तु
ऑब्जेक्ट लोकलस्टोरेज sessionStorageऑब्जेक्ट के बराबर है, सिवाय इसके
कि यह केवल एक सत्र के लिए डेटा संग्रहीत करता है। जब उपयोगकर्ता विशिष्ट ब्राउज़र टैब बंद करता है तो डेटा हटा दिया जाता है।
निम्न उदाहरण वर्तमान सत्र में किसी उपयोगकर्ता द्वारा किसी बटन पर क्लिक किए जाने की संख्या की गणना करता है:
उदाहरण
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";