AngularJS with LocalStorage / SessionStorage

अब हम सीखते हैं AngularJS Tutorial का एक ऐसा चैप्टर जो आपके App को और भी स्मार्ट और user-friendly बना देगा:

💾 AngularJS with localStorage / sessionStorage

(User Data को Browser में Permanently या Temporarily Save करना)

---

📌 localStorage और sessionStorage क्या हैं?

ये दोनों Web Storage APIs हैं जो ब्राउज़र में डेटा store करने की सुविधा देती हैं — बिना server को बार-बार call किए।

Feature	localStorage	sessionStorage
Scope	पूरे ब्राउज़र में	केवल current tab/session
Expiry	तब तक रहता है जब तक manually delete न किया जाए	Tab बंद होते ही data हट जाता है
Size Limit	लगभग 5MB	लगभग 5MB
Data Format	केवल string

---

✅ AngularJS में क्यों use करें?

• Form data save करने के लिए
• Login user को remember करने के लिए
• Offline भी App को usable बनाने के लिए
• Data loss से बचाने के लिए
• Temporary drafts या quiz answers रखने के लिए

---

✅ Basic Syntax (JavaScript/AngularJS Same)

👉 Data Set करना:

localStorage.setItem("name", "Rahul");
sessionStorage.setItem("city", "Delhi");

👉 Data Get करना:

var name = localStorage.getItem("name");
var city = sessionStorage.getItem("city");

👉 Data Remove करना:

localStorage.removeItem("name");
sessionStorage.clear(); // सभी items हटेंगे

---

✅ AngularJS में Use कैसे करें?

Example: User का नाम Save करना

app.controller("storageCtrl", function($scope) {
  // Load saved name (if any)
  $scope.name = localStorage.getItem("name") || "";

  // Save name on change
  $scope.saveName = function() {
    localStorage.setItem("name", $scope.name);
    $scope.message = "Name saved in localStorage!";
  };
});

HTML:

<div ng-app="myApp" ng-controller="storageCtrl" class="w3-container">

  <label>Enter Your Name:</label>
  <input ng-model="name" type="text" class="w3-input w3-border" />

  <button ng-click="saveName()" class="w3-button w3-green w3-margin-top">Save</button>

  <p class="w3-text-blue">{{ message }}</p>

</div>

---

✅ Example: SessionStorage में Temporary Data

app.controller("sessionCtrl", function($scope) {
  $scope.email = sessionStorage.getItem("email") || "";

  $scope.saveEmail = function() {
    sessionStorage.setItem("email", $scope.email);
  };
});

---

💡 JSON Data Save करना

चूंकि localStorage सिर्फ string format में store करता है, इसलिए object को पहले JSON.stringify() करना ज़रूरी है।

var user = { name: "Ankit", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

फिर get करने के लिए:

var user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // "Ankit"

---

🎯 Real-world Use Cases

Use Case	Storage Type
“Remember me” login	localStorage
OTP verification temporary data	sessionStorage
Draft forms / quiz answers	localStorage
Page reload में data retain करना	localStorage
Shopping cart (basic)	localStorage
Modal once-per-session display	sessionStorage

---

⚠️ Important Tips

• Storage में सिर्फ string format save होता है
• Sensitive data कभी न store करें (e.g., passwords)
• Key collision से बचें (prefix ज़रूर रखें)
• Mobile devices में storage limits छोटी हो सकती हैं
• Browser compatibility check कर लें (modern browsers ही support करते हैं)

---

🧠 अभ्यास प्रश्न (Exercise)

1. localStorage और sessionStorage में क्या अंतर है?
2. AngularJS में किसी object को storage में कैसे store करेंगे?
3. नीचे दिए गए code का output क्या होगा?

localStorage.setItem("score", 100);
alert(localStorage.getItem("score")); 

---

✅ आपने क्या सीखा?

• AngularJS में localStorage और sessionStorage का उपयोग
• Form data या temporary data को ब्राउज़र में सुरक्षित रखना
• JSON.stringify() और JSON.parse() का इस्तेमाल
• Real-world scenarios: drafts, auto-fill, user preferences
• Storage clear, read, और remove कैसे करें

---

🎯 अब आप AngularJS apps को बना सकते हैं और भी ज़्यादा smart, memory-friendly और offline-capable — जिससे user experience बेहतर होगा।