|
| 1 | +# Day 20: LocalStorage and SessionStorage 📦 |
| 2 | + |
| 3 | +Welcome to Day 20! Today, we're diving into the world of web storage with **LocalStorage** and **SessionStorage**. These tools allow you to store data directly in the user's browser, making it easy to save and retrieve information across sessions or within a single session. Let's explore how to use them effectively! 🌐 |
| 4 | + |
| 5 | +## Tasks/Activities 📝 |
| 6 | + |
| 7 | +### Activity 1: Understanding LocalStorage 📚 |
| 8 | + |
| 9 | +- [ ] **Task 1:** Write a script to save a string value to `localStorage` and retrieve it. Log the retrieved value. |
| 10 | +- [ ] **Task 2:** Write a script to save an object to `localStorage` by converting it to a JSON string. Retrieve and parse the object, then log it. |
| 11 | + |
| 12 | +### Activity 2: Using LocalStorage 🛠️ |
| 13 | + |
| 14 | +- [ ] **Task 3:** Create a simple form that saves user input (e.g., name and email) to `localStorage` when submitted. Retrieve and display the saved data on page load. |
| 15 | +- [ ] **Task 4:** Write a script to remove an item from `localStorage`. Log the `localStorage` content before and after removal. |
| 16 | + |
| 17 | +### Activity 3: Understanding SessionStorage 🧠 |
| 18 | + |
| 19 | +- [ ] **Task 5:** Write a script to save a string value to `sessionStorage` and retrieve it. Log the retrieved value. |
| 20 | +- [ ] **Task 6:** Write a script to save an object to `sessionStorage` by converting it to a JSON string. Retrieve and parse the object, then log it. |
| 21 | + |
| 22 | +### Activity 4: Using SessionStorage 🔄 |
| 23 | + |
| 24 | +- [ ] **Task 7:** Create a simple form that saves user input (e.g., name and email) to `sessionStorage` when submitted. Retrieve and display the saved data on page load. |
| 25 | +- [ ] **Task 8:** Write a script to remove an item from `sessionStorage`. Log the `sessionStorage` content before and after removal. |
| 26 | + |
| 27 | +### Activity 5: Comparing LocalStorage and SessionStorage ⚖️ |
| 28 | + |
| 29 | +- [ ] **Task 9:** Write a function that accepts a key and a value, and saves the value to both `localStorage` and `sessionStorage`. Retrieve and log the values from both storage mechanisms. |
| 30 | +- [ ] **Task 10:** Write a function that clears all data from both `localStorage` and `sessionStorage`. Verify that both storages are empty. |
| 31 | + |
| 32 | +## Feature Request 🎯 |
| 33 | + |
| 34 | +1. **LocalStorage Script:** Write a script that saves, retrieves, and removes items from `localStorage`, and displays the saved data on page load. |
| 35 | +2. **SessionStorage Script:** Create a script that saves, retrieves, and removes items from `sessionStorage`, and displays the saved data on page load. |
| 36 | +3. **Storage Comparison Script:** Write a script that saves data to both `localStorage` and `sessionStorage`, retrieves the data, and compares the results. |
| 37 | +4. **Clear Storage Script:** Create a script that clears all data from both `localStorage` and `sessionStorage`, and verifies the operation. |
| 38 | + |
| 39 | +## Achievement Unlocked 🏆 |
| 40 | + |
| 41 | +By the end of these activities, you will: |
| 42 | + |
| 43 | +- ✅ Understand how to use **LocalStorage** and **SessionStorage** for persistent and session-specific data storage. |
| 44 | +- ✅ Save, retrieve, and remove data from both **LocalStorage** and **SessionStorage**. |
| 45 | +- ✅ Implement form data storage using **LocalStorage** and **SessionStorage**. |
| 46 | +- ✅ Compare and contrast the use cases for **LocalStorage** and **SessionStorage**. |
| 47 | + |
| 48 | +--- |
| 49 | + |
| 50 | +Happy Coding! 🚀 |
0 commit comments