Storing and retrieving data with localStorage and sessionStorage In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में लोकलस्टोरेज और सेशनस्टोरेज दोनों प्रोसेस जावास्क्रिप्ट में डाटा और इनफार्मेशन वेब स्टोरेज में एपीआई का जरूरी पार्ट हैं, यह क्लाइंट वेब ब्राउज़र में डेटा और इनफार्मेशन को स्टोर और प्रोसेस करने में यूज़ किए जाते हैं। लोकलस्टोरेज और सेशनस्टोरेज दोनों प्रोसेस सिंपल की-वैल्यू आर्डर में डाटा और इनफार्मेशन का स्टोरेज सलूशन हैं, यहाँ इन एपीआई के माध्यम से डेटा कितने समय तक कांस्टेंट या रहता है, जहा लोकलस्टोरेज और सेशनस्टोरेज दोनों में अंतर एक अलग कांसेप्ट है।
LocalStorage and SessionStorage in JavaScript.
- localStorage – जावास्क्रिप्ट प्रोग्रामिंग में बिना किसी टर्मिनेट टाइम के डेटा और इनफार्मेशन को लोकलस्टोरेज में स्टोर करता है। यहाँ इस प्रोसेस में क्लाइंट वेब ब्राउज़र क्लोज होने और फिर से ओपन होने पर भी डेटा तब तक वेब ब्राउज़र में परसिस्टेंट रहता है, जब तक कि इंटरनेट यूजर द्वारा इसे प्रॉपर्ली रिमूव नहीं किया जाए।
- sessionStorage – यहाँ जावास्क्रिप्ट में वेबपेज सेशन की समय अंतराल के लिए डेटा और इनफार्मेशन को स्टोर करता है। जहा वेबपेज क्लोज होने या वेब ब्राउज़र टर्मिनेट होने पर स्टोर स्टैटिक डेटा ऑटोमेटिकली नष्ट हो जाता है।
So, let’s understand the LocalStorage and SessionStorage mechanism in JavaScript better.
Use of localStorage in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में लोकलस्टोरेज ऑब्जेक्ट इंटरनेट यूजर को डेटा को परमानेंट आर्डर में स्टोर करने की परमिशन प्रोवाइड करता है, इसका मतलब है कि डेटा वेब ब्राउज़र में वेबपेज रीलोड और ब्राउज़र रीस्टार्ट होने पर भी परसिस्टेंट रहेगा।
localStorage element in JavaScript.
- localStorage.setItem(key, value) – यह लोकलस्टोरेज में एक की-वैल्यू पेअर को ऐड करता है।
- localStorage.getItem(key) – यह लोकलस्टोरेज से इंडिकेटेड की से रिलेटेड वैल्यू को रिसीव करता है।
- localStorage.removeItem(key) – यह लोकलस्टोरेज से इंडिकेटेड की-वैल्यू पेअर को रिमूव करता है।
- localStorage.clear() – यह लोकलस्टोरेज में सभी की-वैल्यू पेअर को क्लियर करता है।
JavaScript storing and retrieving data in localStorage Example.
// here it Storing data in localStorage location
localStorage.setItem(“employeename”, “Vinay”);
localStorage.setItem(“age”, “28”);
localStorage.setItem(“cont”, “9414”);
// here it Retrieving data from localStorage session
const employename = localStorage.getItem(“employename”);
const age = localStorage.getItem(“age”);
console.log(employename); // Result – Vinay
console.log(age); // Result – 28
console.log(cont); // Result – 9414
Example of Removing and Clearing employeedata
// it Remove a specific key-value pair in setitem
localStorage.removeItem(“employename”);
// it used to Clear all items in localStorage session
localStorage.clear();
Use of sessionStorage in JavaScript programming.
जावास्क्रिप्ट प्रोग्रामिंग में सेशनस्टोरेज ऑब्जेक्ट वेबपेज सेशन के टाइम अंतराल के लिए वेबपेज डाटा को स्टोर करता है। मौजूदा वेब ब्राउज़र में एक वेबपेज सेशन जब तब तक चलता है, तब तक वेब ब्राउज़र का ब्राउज टैब ओपन रहता है। वेब ब्राउज़र टैब क्लोज होने पर सेशन डाटा अपने आप लॉस्ट या रिमूव हो जाता है।
Elements of JavaScript sessionStorage.
- sessionStorage.setItem(key, value) – यह मौजूदा वेबपेज सेशन सेशनस्टोरेज में एक की-वैल्यू पेअर को ऐड करता है।
- sessionStorage.getItem(key) – यह वेबपेज सेशन में सेशनस्टोरेज से इंडिकेटेड की से रिलेटेड वैल्यू को रिसीव करता है।
- sessionStorage.removeItem(key) – यह वेबपेज सेशनस्टोरेज से इंडीकेट की-वैल्यू पेअर को रिमूव करता है।
- sessionStorage.clear() – यह सेशनस्टोरेज में सभी की-वैल्यू पेअर को क्लियर करता है।
Storing and retrieving data in JavaScript example.
// here it used to Storing data in sessionStorage location
sessionStorage.setItem(“sessionId”, “78123”);
sessionStorage.setItem(“sessionLoggedIn”, “true”);
// here it Retrieving data from the current sessionStorage
const sessionId = sessionStorage.getItem(“sessionId”);
const sessionLoggedIn = sessionStorage.getItem(“sessionLoggedIn”);
console.log(sessionId); // Result – 78123
console.log(sessionLoggedIn); // Result – true
Example: Removing and Clearing Data
// here it used to Remove a specific key-value pair in session
sessionStorage.removeItem(“sessionId”);
// here it used to Clear all items in sessionStorage location
sessionStorage.clear();
Multiple uses of localStorage and sessionStorage in JavaScript programming.
जावास्क्रिप्ट प्रोग्रामिंग में लोकलस्टोरेज को अप्लाई सामान्यता ऐसे वेबपेज डेटा के लिए होता है, जिसे वेबपेज में करंट सेशन के बाद भी मेन्टेन करना आवश्यक होता है. जैसे,
यूजर प्रायोरिटी को स्टोर करना (सेशन थीम सेटिंग, लैंग्वेज ऑप्शन) आदि है.
जैसे, वेबपेज सेशन में फ़ॉर्म डेटा को स्टोर करना उदाहरण के लिए, आटोमेटिक डाटा स्टोरेज के लिए. इ-कॉमर्स वेबसाइट में शॉपिंग कार्ट में परचेस आइटम स्टोर करना भले ही यूजर टैब बंद करके बाद में उसे फिर से ओपन करना आदि।
जावास्क्रिप्ट प्रोग्रामिंग में सेशनस्टोरेज का यूज़ अक्सर टेम्पररी डेटा प्रोसेस करने में होता है. जैसे, एक वेबपेज में सेशन आईडी को स्टोर करना, जो वेबपेज में ब्राउज़र टैब क्लोज होने पर टर्मिनेट हो जाती है, सिंगल वेबपेज सेशन में इंटरनेट यूजर की एक्टिविटीज को ट्रैक करना उदाहरण, स्टेप-बाय-स्टेप सेशन बेस्ड वेबपेज फ़ॉर्म है.
Storing and retrieving complex data in JavaScript storage.
जावास्क्रिप्ट सेशन में लोकलस्टोरेज और सेशनस्टोरेज दोनों ही केवल स्ट्रिंग को स्टोर कर सकते हैं। यदि प्रोग्रामर को अधिक कम्प्लेक्स डेटा टाइप में, जैसे ऑब्जेक्ट या ऐरे, स्टोर और प्रोसेस करने की जरूरत है, तो प्रोग्रामर को उन्हें स्ट्रिंग फॉर्मेट में सीक्वेंस कर ग्रुप करना होगा जैसे, JSON.stringify() फंक्शन मेथड को अप्लाई करके और डेटा रिसीव करते समय उन्हें अक्रमबद्ध आर्डर में करना होगा। जिसमे JSON.parse() फंक्शन मेथड का यूज़ कर सकते है।
Example of storing object and array in JavaScript storage.
// here we use to Storing an object in localStorage session
const employee = {
empname: “Kunal”,
empage: 19,
email: “kunal@domain.com”
};
// here we Convert the object to a JSON string and store it
localStorage.setItem(“employee”, JSON.stringify(employee));
// here we used to Retrieving the object from localStorage session
const storedemployee = JSON.parse(localStorage.getItem(“employee”));
console.log(storedemployee.empname); // Result – Kunal
console.log(storedemployee.empage); // Result – 19
Limitations of localStorage and sessionStorage in JavaScript.
- Size limitations – जावास्क्रिप्ट में लोकलस्टोरेज और सेशनस्टोरेज दोनों की स्टोरेज लिमिट प्रति डोमेन लगभग 5 MB मेगाबाइट है। यह लिमिट वेब ब्राउज़र में स्टोर इंटरनेट कुकीज़ से भी बहुत कम है, जबकि अधिकांश मॉडर्न वेब ब्राउज़र में क्लाइंट-साइड डेटा स्टोरेज जरूरत के लिए ठीक है।
- Security – जावास्क्रिप्ट में लोकलस्टोरेज और सेशनस्टोरेज में स्टोर डेटा उसी डोमेन में रन होने वाली किसी भी वेब स्क्रिप्ट के माध्यम से एक्सेस और प्रोसेस किया जा सकता है, इस वजह से अपने सिक्योर क्रेडेंशियल पासवर्ड या पर्सनल इन्फर्मेशन जैसे कॉन्फीडेंटिअल डेटा को स्टोर करने से बचें। यदि अधिक जरूरी हो, तो एन्क्रिप्शन तकनीक को यूज़ करें।
- Synchronous – जावास्क्रिप्ट वेब ब्राउज़र सेशन में लोकलस्टोरेज और सेशनस्टोरेज दोनों सिंक्रोनस एपीआई से वेबपेज डाटा को सेंड और रिसीव करते हैं, इसका मतलब है कि डेटा को सेट करना, ऑनलाइन डाटा को रिसीव करना या डाटा को हटाना जैसे सेशन ऑपरेशन अन्य प्रोग्राम कोड के एक्सेक्यूशन को स्टॉप कर सकते हैं। जबकि यह सामान्यता कम क्वांटिटी के डेटा के लिए कोई प्रॉब्लम नहीं है, लेकिन लार्ज लेवल के वेब ऑपरेशन के लिए यह कई परफॉरमेंस रिलेटेड इश्यूज क्रिएट कर सकता है।
Example of localStorage and sessionStorage for a simple counter in JavaScript.
यहाँ आपको एक साधारण टेस्टर का उदाहरण मिलता है, जो लोकलस्टोरेज को अप्लाई करके वेबपेज को री:लोड होने पर गिनती को बनाए रखता है.
/// here it Retrieve the tester value from localStorage session, default to 0 value if it is not found
let count = localStorage.getItem(“tester”) ? parseInt(localStorage.getItem(“tester”)) : 0;
// let we Update the tester and display it exist
function updatetester() {
count++;
localStorage.setItem(“tester”, count);
document.getElementById(“tester”).textContent = count;
}
// here it Display the current tester value when the webpage loads in session
document.getElementById(“tester”).textContent = count;
document.getElementById(“increaseButton”).addEventListener(“click”, updatetester);
Explanation of localStorage and sessionStorage for a simple tester.
यहाँ टेस्टर की वैल्यू लोकलस्टोरेज में स्टोर होता है, इस वजह से यह वेबपेज को री-लोड होने के बाद भी स्टेबल रहता है।
यहाँ बटन टेस्टर को बढ़ाता है, और अपडेट वैल्यू को लोकलस्टोरेज में वापस स्टोर कर देता है।
main aspect Between localStorage and sessionStorage session
| Session Feature | localStorage session | sessionStorage session |
| Persistence | Here it Data storage persists, even when the web browser is closed | Here web browser Data is cleared, when the web browser or tab is closed |
| Scope | Here it Available across all tabs and web browser windows | Her it Available only for the current web browser tab |
| Data Storage Limit | It supports ~5MB per web browser domain | Here it supports ~5MB per domain |
| Expiration | Here is No expiration (must be cleared manually) by user after session | Here Data expires, when the user page session ends |
| Use Case | Here it used to Long-term storage (user preferences, etc.) | Here its nature is Temporary storage (e.g., session-specific data) |
Summary of localStorage and sessionStorage in JavaScript programming.
- localStorage – मौजूदा वेब ब्राउज़र सेशन और वेब ब्राउज़र टैब में डेटा को अनिश्चित समय तक ओपन रखने के लिए यूज़ होता है। जहा वेब ब्राउज़र यूजर प्रायोरिटी, इ-कॉमर्स शॉपिंग कार्ट और इसी तरह के डेटा के लिए आइडियल है।
- sessionStorage – यह वेब ब्राउज़र में पेज सेशन के दौरान टेम्पररी स्टोरेज के लिए यूज़ होता है। जहा सेशन-स्पेसिफिक डेटा, जैसे, ऑनलाइन फील फ़ॉर्म प्रोग्रेस या ऑथेंटिकेशन टोकन के लिए आइडियल है, जिन्हें ब्राउज़र टैब या ब्राउज़र क्लोज होने पर छोड़ दिया जाना चाहिए।
- Data types – चूँकि जावास्क्रिप्ट वेब ब्राउज़र सेशन में लोकलस्टोरेज और सेशनस्टोरेज वेब ब्राउज़र डेटा को स्ट्रिंग फॉर्मेट में स्टोर करते हैं, इस वजह से काम्प्लेक्स डाटा टाइप ऑब्जेक्ट, ऐरे को JSON.stringify() और JSON.parse() फंक्शन मेथड को अप्लाई करने में क्रमबद्ध और अक्रमबद्ध करने की जरूरत होती है।
