Skip to content

Latest commit

 

History

History
121 lines (90 loc) · 4.17 KB

module-3.6-interacting-with-browser-local-storage.md

File metadata and controls

121 lines (90 loc) · 4.17 KB

Module 3: Advanced DOM Manipulation

3.6. Interacting with the Browser's Local Storage

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.

Overview of Local Storage

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.

Here's how you can interact with localStorage in JavaScript:

  1. Storing Data:

    You can store data in localStorage using the setItem method, which takes a key-value pair.

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

  2. Retrieving Data:

    To retrieve data, you can use the getItem method with the key.

    const username = localStorage.getItem('username');
console.log(username); // Output: JohnDoe

  3. Updating Data:

    If you want to update data for an existing key, just use setItem with the same key.

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

  4. Removing Data:

    To remove data, you can use the removeItem method.

    localStorage.removeItem('username');

  5. Clearing All Data:

    If you need to clear all data stored in localStorage, use the clear method.

    localStorage.clear();

Example: Using Local Storage for a To-Do List

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.

<!DOCTYPE html>
<html>
<head>
  <title>Local Storage To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <ul id="task-list">
    <!-- Tasks will be added here using JavaScript -->
  </ul>
  <input type="text" id="new-task" placeholder="New task">
  <button id="add-task">Add Task</button>
  <button id="clear-tasks">Clear All</button>
  <script>
    const taskList = document.getElementById('task-list');
    const newTask = document.getElementById('new-task');
    const addTask = document.getElementById('add-task');
    const clearTasks = document.getElementById('clear-tasks');

    addTask.addEventListener('click', () => {
      const taskText = newTask.value.trim();
      if (taskText) {
        addTaskToLocalStorage(taskText);
        newTask.value = '';
        displayTasksFromLocalStorage();
      }
    });

    clearTasks.addEventListener('click', () => {
      clearAllTasksFromLocalStorage();
      displayTasksFromLocalStorage();
    });

    function addTaskToLocalStorage(task) {
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.push(task);
      localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    function clearAllTasksFromLocalStorage() {
      localStorage.removeItem('tasks');
    }

    function displayTasksFromLocalStorage() {
      taskList.innerHTML = '';
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.forEach(task => {
        const li = document.createElement('li');
        li.textContent = task;
        taskList.appendChild(li);
      });
    }

    // Display tasks from local storage on page load
    displayTasksFromLocalStorage();
  </script>
</body>
</html>

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.

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.