From 9a03b8a0e96cafd6280f92741d701f9c10ac0196 Mon Sep 17 00:00:00 2001
From: Ahmed Talaat <ahmed.talaat.ali05@gmail.com>
Date: Mon, 25 May 2026 09:43:46 +0300
Subject: [PATCH 1/2] Add beginner lesson about local storage

---
 2-js-basics/5-local-storage/README.md | 164 ++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 2-js-basics/5-local-storage/README.md

diff --git a/2-js-basics/5-local-storage/README.md b/2-js-basics/5-local-storage/README.md
new file mode 100644
index 000000000..69b53efc5
--- /dev/null
+++ b/2-js-basics/5-local-storage/README.md
@@ -0,0 +1,164 @@
+# JavaScript Basics: Local Storage in JavaScript
+
+## 📌 What is Local Storage?
+
+**Local Storage** is a feature in the browser that allows you to store data persistently in the user's device.
+
+Unlike variables or session data, data in Local Storage:
+- Does NOT expire when the browser is closed
+- Stays available until manually cleared
+- Is stored as **key-value pairs (strings only)**
+
+---
+
+## 💡 Why use Local Storage?
+
+You use Local Storage when you want to:
+- Save user preferences (theme, language)
+- Store login state (NOT secure auth tokens)
+- Keep cart items in e-commerce apps
+- Save form data temporarily
+- Improve user experience without a backend
+
+---
+
+## 🧩 Basic Syntax
+
+### Store data
+```js
+localStorage.setItem("key", "value");
+```
+
+### Get data
+```js
+localStorage.getItem("key");
+```
+
+### Remove specific item
+```js
+localStorage.removeItem("key");
+```
+
+### Clear all storage
+```js
+localStorage.clear();
+```
+
+---
+
+## 🔥 Example 1: Storing Simple Data
+```js
+localStorage.setItem("username", "Ahmed");
+
+let user = localStorage.getItem("username");
+console.log(user); // Ahmed
+```
+
+---
+
+## 🧠 Important Rule
+
+Local Storage ONLY stores strings.
+So this will NOT work properly:
+```js
+localStorage.setItem("user", { name: "Ahmed" });
+```
+
+It becomes:
+```js
+[object Object]
+```
+
+---
+
+## 🛠️ Storing Objects Properly
+
+To store objects or arrays, use:
+
+### JSON.stringify()
+
+```js
+const user = {
+  name: "Ahmed",
+  age: 21
+};
+
+localStorage.setItem("user", JSON.stringify(user));
+```
+
+### JSON.parse()
+
+```js
+const data = localStorage.getItem("user");
+const userObject = JSON.parse(data);
+console.log(userObject.name); // Ahmed
+```
+
+---
+
+## 📦 Example 2: Storing an Array
+```js
+const tasks = ["HTML", "CSS", "JavaScript"];
+
+localStorage.setItem("tasks", JSON.stringify(tasks));
+
+const savedTasks = JSON.parse(localStorage.getItem("tasks"));
+
+console.log(savedTasks[0]); // HTML
+```
+
+---
+
+## 🧹 Removing Data
+
+### Remove one item
+```js
+localStorage.removeItem("username");
+```
+
+### Clear everything
+```js
+localStorage.clear();
+```
+
+---
+
+## 🚀 Real Use Cases
+### 1. Dark Mode Toggle
+```js
+localStorage.setItem("theme", "dark");
+
+const theme = localStorage.getItem("theme");
+document.body.className = theme;
+```
+
+### 2. Remember User Login State
+```js
+localStorage.setItem("loggedIn", "true");
+
+if (localStorage.getItem("loggedIn") === "true") {
+  console.log("User is logged in");
+}
+```
+
+---
+
+## ⚠️ Limitations
+- Not secure (avoid sensitive data like passwords or tokens)
+- Limited storage size (~5MB)
+
+---
+
+## 🧼 Best Practices
+
+- ✔ Always use JSON for objects
+- ✔ Clear unused data to avoid clutter
+- ✔ Don’t store sensitive information
+- ✔ Use meaningful keys
+- ✔ Check if data exists before parsing
+
+---
+
+## 📚 Summary
+
+Local Storage is a simple but powerful browser feature used to store data permanently on the client side. It is perfect for improving UX, but it should be used carefully due to security and storage limitations.

From 3ec638fe0b0a0a38b4e75640c7da39363cf6e271 Mon Sep 17 00:00:00 2001
From: Ahmed Talaat <ahmed.talaat.ali05@gmail.com>
Date: Mon, 25 May 2026 09:46:39 +0300
Subject: [PATCH 2/2] Add Local Storage to Topics

---
 2-js-basics/README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/2-js-basics/README.md b/2-js-basics/README.md
index 02c69bcb8..26ff4c55a 100644
--- a/2-js-basics/README.md
+++ b/2-js-basics/README.md
@@ -8,7 +8,8 @@ JavaScript is the language of the web. In these four lessons, you'll learn its b
 2. [Functions and Methods](2-functions-methods/README.md)
 3. [Making Decisions with JavaScript](3-making-decisions/README.md)
 4. [Arrays and Loops](4-arrays-loops/README.md)
+5. [Local Storage](5-local-storage/README.md)
 
 ### Credits
 
-These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
+These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)