HTML Web Storage API

Modern web applications में user data को browser में store करना एक common requirement है। Login state, theme preference, language selection, cart data जैसे कई use cases के लिए HTML Web Storage API का इस्तेमाल किया जाता है। यह API cookies का modern और efficient alternative मानी जाती है।

इस chapter में हम detail में समझेंगे कि HTML Web Storage API क्या है, यह कैसे काम करती है, इसके types कौन-कौन से हैं, methods क्या हैं, cookies से difference, security aspects और real-world examples कैसे implement किए जाते हैं।

HTML Web Storage API क्या है?

HTML Web Storage API एक Web API है जो browser में key-value pair के form में data store करने की सुविधा देती है। यह data client-side पर store होता है और JavaScript के माध्यम से access किया जाता है।

Web Storage API के दो main components होते हैं:

• localStorage
• sessionStorage

Web Storage API क्यों इस्तेमाल करते हैं?

Cookies की तुलना में Web Storage API कई मामलों में बेहतर है:

• ज्यादा storage capacity
• Faster access
• Server के साथ automatically send नहीं होता
• Simple JavaScript interface

Web Storage API के Types

1. localStorage

localStorage क्या है?

localStorage browser में data को permanently store करता है। Browser बंद करने या system restart करने पर भी data delete नहीं होता, जब तक manually clear न किया जाए।

localStorage Methods

Data Set करना

localStorage.setItem('username', 'Admin');

Data Get करना

const user = localStorage.getItem('username');

Data Remove करना

localStorage.removeItem('username');

Complete Storage Clear करना

localStorage.clear();

Use Cases

• User preferences
• Theme settings (dark/light)
• Remember me functionality

2. sessionStorage

sessionStorage क्या है?

sessionStorage data को केवल current browser session तक store करता है। Browser tab या window बंद होते ही data automatically clear हो जाता है।

sessionStorage Methods

Data Set करना

sessionStorage.setItem('token', 'abc123');

Data Get करना

const token = sessionStorage.getItem('token');

Data Remove करना

sessionStorage.removeItem('token');

Use Cases

• Temporary login state
• Form data backup
• One-time session information

localStorage vs sessionStorage

Feature	localStorage	sessionStorage
Data Lifetime	Permanent	Tab session
Browser Close	Data remains	Data deleted
Storage Limit	~5–10 MB	~5 MB
Scope	All tabs (same origin)	Single tab

Web Storage API और JSON Data

Web Storage API सिर्फ string data store करती है। Objects या arrays store करने के लिए JSON का use करना पड़ता है।

Example

const userData = { name: 'Rahul', age: 25 };
localStorage.setItem('user', JSON.stringify(userData));

const data = JSON.parse(localStorage.getItem('user'));
console.log(data.name);

Storage Event

जब localStorage में data change होता है और same origin के दूसरे tab खुले होते हैं, तो storage event trigger होता है।

Example

window.addEventListener('storage', function (event) {
  console.log(event.key);
  console.log(event.newValue);
});

Browser Compatibility

HTML Web Storage API सभी modern browsers में supported है:

• Chrome
• Firefox
• Edge
• Safari

Old browsers में limited या no support हो सकता है।

Security Considerations

• Sensitive data (password, card details) store न करें
• XSS attacks से बचाव करें
• User data encrypt करने पर विचार करें

Web Storage API vs Cookies

Feature	Web Storage	Cookies
Storage Size	Large	Small
Server Sent	No	Yes
Performance	Faster	Slower
Complexity	Simple	Complex

Common Mistakes

• Sensitive information store करना
• JSON data parse करना भूल जाना
• Storage limit ignore करना

Best Practices

• Only required data store करें
• Clear naming convention use करें
• Unused data regularly remove करें
• Error handling implement करें

Real-World Example: Theme Switcher

const theme = localStorage.getItem('theme');
if (theme) {
  document.body.className = theme;
}

function setTheme(value) {
  localStorage.setItem('theme', value);
}

HTML Web Storage API और JavaScript

Web Storage API पूरी तरह JavaScript के through operate होती है। HTML का role UI provide करने तक सीमित होता है।

Conclusion

HTML Web Storage API modern web applications के लिए एक essential feature है। localStorage और sessionStorage का सही use करके आप better performance, improved user experience और cleaner architecture achieve कर सकते हैं।

HTML और JavaScript सीख रहे हर developer के लिए Web Storage API एक must-learn topic है।