Types के साथ LocalStorage
In this page:
const value = localStorage.getItem("key");
const data: Type = JSON.parse(value ?? "{}");
localStorage.setItem("key", JSON.stringify(data));Strings Store करना
localStorage.setItem और getItem सिर्फ strings के साथ काम करते हैं, इसलिए एक string value store करना सबसे simple case है और किसी भी तरफ कोई extra type conversion नहीं चाहिए।
उदाहरण: Storing Strings
localStorage.setItem("username", "Ravi");
const name: string | null = localStorage.getItem("username");
console.log(name);Numbers Store करना
एक number store करने का मतलब है इसे save करने से पहले string में convert करना (String(value)) और retrieval पर Number() से इसे वापस parse करना, क्योंकि localStorage में numeric type का कोई concept ही नहीं है।
उदाहरण: Storing Numbers
localStorage.setItem("age", String(25));
const age: number = Number(localStorage.getItem("age"));
console.log(age);JSON से Objects Store करना
एक object store करने का मतलब है इसे save करने से पहले JSON.stringify से एक JSON string में serialize करना और इसे JSON.parse से वापस parse करना, जो आपके expected shape को explicitly annotate या assert किए बिना default रूप से any return करता है।
उदाहरण: Storing Objects with JSON
interface User { name: string; age: number }
const user: User = { name: "Ravi", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
const loaded: User = JSON.parse(localStorage.getItem("user")!);
console.log(loaded.name);Typed LocalStorage Helpers
एक typed localStorage helper setItem/getItem को generic functions में wrap करता है जो JSON conversion internally handle करते हैं, इसलिए बाकी का आपका code हर call site पर boilerplate दोहराए बिना typed values पढ़ और लिख सकता है।
उदाहरण: Typed LocalStorage Helpers
function setTyped<T>(key: string, value: T): void {
localStorage.setItem(key, JSON.stringify(value));
}
function getTyped<T>(key: string): T | null {
const raw = localStorage.getItem(key);
return raw ? (JSON.parse(raw) as T) : null;
}
setTyped("count", 5);
console.log(getTyped<number>("count"));Safe Parsing और Validation
क्योंकि JSON.parse any return करता है, safe parsing का मतलब है वापस आई चीज़ के shape को validate करना — ज़रूरी fields मौजूद हैं और सही type की हैं यह check करना — इसे अपने expected type के रूप में trust करने से पहले, क्योंकि stored data stale या tampered हो सकता है।
उदाहरण: Safe Parsing and Validation
interface User { name: string }
function isUser(value: any): value is User {
return typeof value?.name === "string";
}
localStorage.setItem("user", JSON.stringify({ name: "Ravi" }));
const parsed = JSON.parse(localStorage.getItem("user")!);
if (isUser(parsed)) console.log(parsed.name);- बिना convert किए एक stored number वापस पढ़ना, जैसे
localStorage.getItem("age") + 1, जो"251"देता है। - बिना check किए एक missing key पर
JSON.parsecall करना, क्योंकिgetItemnullreturn करता है। - बिना
JSON.stringifyके एक object save करना, जो text"[object Object]"store करता है।
- DOM type definitions TypeScript को elements, events, और browser APIs के types बताती हैं।
- Elements select करना और उन्हें specific types में cast करना आपको element-specific properties सुरक्षित रूप से access देता है।
- Typed event handlers, form handling, और
localStorageaccess browser code को type-safe रखते हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: