Using Local Storage in Object: A Comprehensive Guide

Object Local Storage" in JavaScript typically refers to the practice of storing JavaScript objects (complex data structures) in Local Storage, a web browser feature that allows data to be stored persistently on a user's device. This approach involves serializing JavaScript objects to JSON strings before storing them in Local Storage and deserializing them when retrieved.

Local Storage:

Local Storage is a web browser feature that allows web applications to store data on the user's device. It provides a simple key-value store for storing data persistently between browser sessions.

JavaScript Objects:

JavaScript objects are complex data structures that can hold various types of data, including nested objects, arrays, strings, numbers, and more. They are often used to represent structured data in web applications.

Object Serialization:

To store JavaScript objects in Local Storage, they must be converted (serialized) into a format that Local Storage can handle. Typically, objects are serialized to JSON (JavaScript Object Notation), which is a text-based format that can represent complex data structures.

JSON.stringify():

The JSON.stringify() method in JavaScript is used to serialize (convert) a JavaScript object into a JSON string. This JSON string can then be stored in Local Storage.

JSON Parsing:

When retrieving data from Local Storage, the stored JSON string needs to be converted back into a JavaScript object. This process is called deserialization.

JSON.parse():

The JSON.parse() method in JavaScript is used to deserialize (convert) a JSON string into a JavaScript object.

sample Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Object-LocalStorage</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>CRUD with Local Storage</h1>
      <form id="dataForm">
        <label for="nameInput">Name:</label>
        <input type="text" id="nameInput" required />

        <label for="ageInput">Age:</label>
        <input type="number" id="ageInput" required />

        <label for="genderSelect">Gender:</label>
        <select id="genderSelect" required>
          <option value="">Select Gender</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>

        <button type="submit">Add Data</button>
      </form>

      <div id="output">
        <h2>Stored Data:</h2>
        <table id="dataTable">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Gender</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody id="dataList"></tbody>
        </table>
      </div>
    </div>
    <div class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Edit Data</h2>
        <form id="editForm">
          <input type="hidden" id="editIndex" />
          <label for="editNameInput">Name:</label>
          <input type="text" id="editNameInput" required />

          <label for="editAgeInput">Age:</label>
          <input type="number" id="editAgeInput" required />

          <label for="editGenderSelect">Gender:</label>
          <select id="editGenderSelect" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>

          <button type="submit">Save Changes</button>
        </form>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

script.js

document.addEventListener("DOMContentLoaded", function () {
  const modal = document.querySelector(".modal");
  const closeBtn = document.querySelector(".close");
  const tableBody = document.querySelector("#dataList");
  const dataForm = document.getElementById("dataForm");

  const nameInput = document.getElementById("nameInput");
  const ageInput = document.getElementById("ageInput");
  const genderSelect = document.getElementById("genderSelect");

  const editForm = document.getElementById("editForm");
  const editIndex = document.getElementById("editIndex");
  const editNameInput = document.getElementById("editNameInput");
  const editAgeInput = document.getElementById("editAgeInput");
  const editGenderSelect = document.getElementById("editGenderSelect");

  dataForm.addEventListener("submit", function (e) {
    e.preventDefault();
    const name = nameInput.value.trim();
    const age = parseInt(ageInput.value);
    const gender = genderSelect.value;
    if (name !== "" && !isNaN(age) && gender !== "") {
      const user = {
        name: name,
        age: age,
        gender: gender,
      };
      addToLocalStorage(user);
      loadStoredData();
      dataForm.reset();
    } else {
      alert("Please Fill All Details");
    }
  });

  editForm.addEventListener("submit", function (e) {
    e.preventDefault();
    const index = editIndex.value.trim();
    const newName = editNameInput.value.trim();
    const newAge = parseInt(editAgeInput.value);
    const newGender = editGenderSelect.value;
    if (newName !== "" && !isNaN(newAge) && newGender !== "") {
      const storedData = JSON.parse(localStorage.getItem("myData")) || [];
      storedData[index].name = newName;
      storedData[index].age = newAge;
      storedData[index].gender = newGender;
      localStorage.setItem("myData", JSON.stringify(storedData));
      editForm.reset();
      modal.style.display = "none";
      loadStoredData();
    } else {
      alert("Please Fill All Details");
    }
  });

  function addToLocalStorage(user) {
    const storedData = JSON.parse(localStorage.getItem("myData")) || [];
    storedData.push(user);
    localStorage.setItem("myData", JSON.stringify(storedData));
  }

  loadStoredData();

  function editData() {
    const index = this.dataset.index;
    const storedData = JSON.parse(localStorage.getItem("myData")) || [];
    const data = storedData[index];
    editIndex.value = index;
    editNameInput.value = data.name;
    editAgeInput.value = data.age;
    editGenderSelect.value = data.gender;
    modal.style.display = "block";
  }

  function deletaData() {
    if (confirm("Are You Sure to Delete ?")) {
      const index = this.dataset.index;
      const storedData = JSON.parse(localStorage.getItem("myData")) || [];
      storedData.splice(index, 1);
      localStorage.setItem("myData", JSON.stringify(storedData));
      loadStoredData();
    }
  }
  // Function to close the modal using Close Btn
  closeBtn.addEventListener("click", function () {
    modal.style.display = "none";
  });

  // Function to close the modal using Model Window Click
  window.addEventListener("click", function (e) {
    if (e.target == modal) {
      modal.style.display = "none";
    }
  });

  function loadStoredData() {
    const storedData = JSON.parse(localStorage.getItem("myData")) || [];
    tableBody.innerHTML = "";
    storedData.forEach(function (data, index) {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>${data.name}</td>
        <td>${data.age}</td>
        <td>${data.gender}</td>
        <td><button data-index="${index}" class="btnEdit">Edit</button></td>
        <td><button data-index="${index}" class="btnDelete">Delete</button></td>
      `;
      tableBody.appendChild(row);
    });
    const editButtons = document.querySelectorAll(".btnEdit");
    editButtons.forEach((btn) => {
      btn.addEventListener("click", editData);
    });

    const delButtons = document.querySelectorAll(".btnDelete");
    delButtons.forEach((btn) => {
      btn.addEventListener("click", deletaData);
    });
  }
});

/*
[{"name":"Tiya","age":2,"gender":"Female"},{"name":"Raja","age":45,"gender":"Male"}]

*/

The code starts by adding an event listener for the "DOMContentLoaded" event, ensuring that the JavaScript code only runs after the HTML document has been fully loaded.

DOM elements are selected and stored in variables. These elements include the modal dialog, form elements, input fields for adding data, and input fields for editing data.

Event listeners are set up for the form submissions. The dataForm listener handles adding new data, while the editForm listener handles editing existing data. Both forms prevent the default form submission behavior using e.preventDefault().

The addToLocalStorage function is responsible for adding new data to Local Storage. It retrieves existing data, pushes the new user data, and updates Local Storage.

The loadStoredData function loads and displays stored data from Local Storage. It dynamically generates table rows for each data item and adds event listeners to edit and delete buttons.

The editData function allows users to edit existing data. It populates the edit form with the selected data and opens the modal dialog for editing.

The deletaData function enables users to delete data items. It prompts for confirmation and removes the selected data item from Local Storage.

Event listeners are added for closing the modal dialog using both the "Close" button and by clicking outside of the modal window.

Finally, the code initializes by calling loadStoredData() to load and display any existing data stored in Local Storage.

To enhance the user experience, it's essential to add CSS styles to the HTML page for a visually appealing and organized presentation of content.

style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f0f0f0;
}

.container {
  max-width: 500px;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  color: crimson;
  text-transform: uppercase;
  margin-bottom: 10px;
}

h2 {
  font-size: 16px;
  font-weight: 500;
  color: chocolate;
  margin-bottom: 10px;
}
label,
input,
select {
  display: block;
  width: 250px;
  height: 25px;
  margin-bottom: 5px;
  padding-left: 2px;
}

button {
  display: block;
  padding: 3px 15px;
}

#output {
  margin-top: 30px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 5px 3px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f2f2f2;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  width: 60%;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
}

.close:hover {
  color: black;
}

#editForm button,
#dataForm button {
  margin-top: 10px;
}

Object Local Storage is commonly used when you need to persistently store and retrieve structured data, such as user preferences, configuration settings, or application state. However, keep in mind that Local Storage has limitations, including a storage size limit and being restricted to the same-origin policy. Additionally, it's important to ensure that the data you store in Local Storage does not contain sensitive information since it's accessible to JavaScript running on the same domain.