|
| 1 | +**Module 3: Advanced DOM Manipulation** |
| 2 | + |
| 3 | +### 3.6. Interacting with the Browser's Local Storage |
| 4 | + |
| 5 | +Local storage is a key feature of web browsers that allows you to store data on the client's side. This data persists even after the browser is closed and is available for use when the user returns to your website. It's a valuable tool for storing small amounts of data that are crucial for your web application. |
| 6 | + |
| 7 | +#### Overview of Local Storage |
| 8 | + |
| 9 | +Local storage is part of the Web Storage API and provides two mechanisms for storing data: `localStorage` and `sessionStorage`. In this submodule, we'll focus on `localStorage`. The difference between the two is that data stored in `localStorage` persists indefinitely or until explicitly removed, while data in `sessionStorage` is only available for the duration of a page session. |
| 10 | + |
| 11 | +Here's how you can interact with `localStorage` in JavaScript: |
| 12 | + |
| 13 | +1. **Storing Data:** |
| 14 | + |
| 15 | + You can store data in `localStorage` using the `setItem` method, which takes a key-value pair. |
| 16 | + |
| 17 | + ```javascript |
| 18 | + localStorage.setItem('username', 'JohnDoe'); |
| 19 | + ``` |
| 20 | + |
| 21 | +2. **Retrieving Data:** |
| 22 | + |
| 23 | + To retrieve data, you can use the `getItem` method with the key. |
| 24 | + |
| 25 | + ```javascript |
| 26 | + const username = localStorage.getItem('username'); |
| 27 | + console.log(username); // Output: JohnDoe |
| 28 | + ``` |
| 29 | + |
| 30 | +3. **Updating Data:** |
| 31 | + |
| 32 | + If you want to update data for an existing key, just use `setItem` with the same key. |
| 33 | + |
| 34 | + ```javascript |
| 35 | + localStorage.setItem('username', 'NewUsername'); |
| 36 | + ``` |
| 37 | + |
| 38 | +4. **Removing Data:** |
| 39 | + |
| 40 | + To remove data, you can use the `removeItem` method. |
| 41 | + |
| 42 | + ```javascript |
| 43 | + localStorage.removeItem('username'); |
| 44 | + ``` |
| 45 | + |
| 46 | +5. **Clearing All Data:** |
| 47 | + |
| 48 | + If you need to clear all data stored in `localStorage`, use the `clear` method. |
| 49 | + |
| 50 | + ```javascript |
| 51 | + localStorage.clear(); |
| 52 | + ``` |
| 53 | + |
| 54 | +#### Example: Using Local Storage for a To-Do List |
| 55 | + |
| 56 | +Let's look at a practical example of using `localStorage` for a to-do list application. We'll store and retrieve tasks using local storage. |
| 57 | + |
| 58 | +```html |
| 59 | +<!DOCTYPE html> |
| 60 | +<html> |
| 61 | +<head> |
| 62 | + <title>Local Storage To-Do List</title> |
| 63 | +</head> |
| 64 | +<body> |
| 65 | + <h1>To-Do List</h1> |
| 66 | + <ul id="task-list"> |
| 67 | + <!-- Tasks will be added here using JavaScript --> |
| 68 | + </ul> |
| 69 | + <input type="text" id="new-task" placeholder="New task"> |
| 70 | + <button id="add-task">Add Task</button> |
| 71 | + <button id="clear-tasks">Clear All</button> |
| 72 | + <script> |
| 73 | + const taskList = document.getElementById('task-list'); |
| 74 | + const newTask = document.getElementById('new-task'); |
| 75 | + const addTask = document.getElementById('add-task'); |
| 76 | + const clearTasks = document.getElementById('clear-tasks'); |
| 77 | +
|
| 78 | + addTask.addEventListener('click', () => { |
| 79 | + const taskText = newTask.value.trim(); |
| 80 | + if (taskText) { |
| 81 | + addTaskToLocalStorage(taskText); |
| 82 | + newTask.value = ''; |
| 83 | + displayTasksFromLocalStorage(); |
| 84 | + } |
| 85 | + }); |
| 86 | +
|
| 87 | + clearTasks.addEventListener('click', () => { |
| 88 | + clearAllTasksFromLocalStorage(); |
| 89 | + displayTasksFromLocalStorage(); |
| 90 | + }); |
| 91 | +
|
| 92 | + function addTaskToLocalStorage(task) { |
| 93 | + const tasks = JSON.parse(localStorage.getItem('tasks')) || []; |
| 94 | + tasks.push(task); |
| 95 | + localStorage.setItem('tasks', JSON.stringify(tasks)); |
| 96 | + } |
| 97 | +
|
| 98 | + function clearAllTasksFromLocalStorage() { |
| 99 | + localStorage.removeItem('tasks'); |
| 100 | + } |
| 101 | +
|
| 102 | + function displayTasksFromLocalStorage() { |
| 103 | + taskList.innerHTML = ''; |
| 104 | + const tasks = JSON.parse(localStorage.getItem('tasks')) || []; |
| 105 | + tasks.forEach(task => { |
| 106 | + const li = document.createElement('li'); |
| 107 | + li.textContent = task; |
| 108 | + taskList.appendChild(li); |
| 109 | + }); |
| 110 | + } |
| 111 | +
|
| 112 | + // Display tasks from local storage on page load |
| 113 | + displayTasksFromLocalStorage(); |
| 114 | + </script> |
| 115 | +</body> |
| 116 | +</html> |
| 117 | +``` |
| 118 | + |
| 119 | +In this example, you can add tasks to your to-do list, and the tasks will be stored in `localStorage`. When you revisit the page, the tasks are retrieved from `localStorage` and displayed. This ensures that the tasks persist even after the browser is closed. |
| 120 | + |
| 121 | +Local storage is a powerful feature for creating a seamless user experience and is commonly used for saving user preferences, cart contents in e-commerce websites, and much more. It simplifies data storage on the client side, reducing the need to make frequent requests to the server for small, frequently used data. |
0 commit comments