JS LocalStorage और SessionStorage

Storage क्या है?

Web storage किसी browser को string data की छोटी मात्रा save करने देता है। cookies के उलट, storage data हर HTTP request के साथ अपने आप नहीं भेजा जाता, जो इसे ज़्यादा मात्रा के client-side-only data के लिए बेहतर बनाता है।

उदाहरण: What Is Storage?

localStorage.setItem("visits", "1");
console.log(localStorage.getItem("visits")); // not sent with every HTTP request, unlike cookies

setItem() और getItem()

कोई value save करने के लिए setItem() इस्तेमाल करें और उसे पढ़ने के लिए getItem()। दोनों methods सिर्फ strings के साथ काम करते हैं — किसी number या object को सीधे store करने की कोशिश उसका coerced string form store कर देगी, जो शायद ही आपको चाहिए होता है।

उदाहरण: setItem() and getItem()

localStorage.setItem("age", 30); // stored as string "30"
console.log(typeof localStorage.getItem("age"));

Objects और JSON

Storage values strings होती हैं, इसलिए objects के लिए JSON.stringify() और JSON.parse() इस्तेमाल करें। किसी object को store करने का मतलब है setItem() से पहले JSON.stringify() कॉल करना और getItem() के बाद JSON.parse(), क्योंकि storage structured data सीधे नहीं रख सकता।

उदाहरण: Objects and JSON

// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
const user = { name: "Sam", age: 30 };
// Call `localStorage.setItem("user", JSON.stringify(user))`
// Call `localStorage.setItem("user", JSON.stringify(user))`
localStorage.setItem("user", JSON.stringify(user));
// Declare the constant `loaded`, set to `JSON.parse(localStorage.getItem("user"))`
// Declare the constant `loaded`, set to `JSON.parse(localStorage.getItem("user"))`
const loaded = JSON.parse(localStorage.getItem("user"));
// Print `loaded.name` to the console
// Print `loaded.name` to the console
console.log(loaded.name);

Remove और Clear

removeItem() एक key को delete करता है। clear() किसी storage area की सभी keys हटा देता है। चूंकि clear() उस origin की हर key मिटा देता है, जब आपको सिर्फ एक stored data हटाना हो तो किसी खास key के साथ removeItem() को prefer करें।

उदाहरण: Remove and Clear

localStorage.setItem("a", "1");
localStorage.setItem("b", "2");
localStorage.removeItem("a");
console.log(localStorage.getItem("a")); // null
localStorage.clear();
console.log(localStorage.getItem("b")); // null

Local बनाम Session

localStorage आमतौर पर browser बंद होने के बाद भी रहता है। sessionStorage tab session से जुड़ा होता है।

उस data के लिए localStorage चुनें जिसे visits के पार बना रहना चाहिए (जैसे कोई saved theme preference) और उस data के लिए sessionStorage जिसे tab बंद होने पर reset हो जाना चाहिए।

उदाहरण: Local vs Session

localStorage.setItem("theme", "dark");   // survives closing the browser
sessionStorage.setItem("formStep", "2"); // cleared when tab closes
console.log(localStorage.getItem("theme"), sessionStorage.getItem("formStep"));