Understanding localStorage, JSON.stringify(), and JSON.parse() in JavaScript

Introduction

When working with web applications, we often need to store and retrieve data on the client side. One of the most common ways to achieve this is by using the localStorage API in JavaScript. However, since localStorage only supports string data, we need JSON.stringify() and JSON.parse() to store and retrieve complex data structures like objects and arrays.

In this article, we will explore what localStorage is, how JSON.stringify() and JSON.parse() work, and how they are related to each other with real-world use cases.

---

What is localStorage?

localStorage is a built-in JavaScript API that allows us to store key-value pairs in a web browser with no expiration date. The stored data remains available even after the user closes and reopens the browser.

Features of localStorage:

• Stores data as key-value pairs.

• Data persists even after a page reload or browser restart.

• The stored data is limited to around 5MB per origin.

• Only stores data in string format.

Basic Usage:

1. Storing data localStorage.setItem("username", "Pradeep");

2. Retrieving data console.log(localStorage.getItem("username")); // Output: Pradeep

3. Removing data localStorage.removeItem("username");

4. Clearing all stored data localStorage.clear();

Why Use JSON.stringify() and JSON.parse()?

Since localStorage only stores strings, we cannot directly store objects or arrays. If we try to store an object:

localStorage.setItem("user", { name: "Pradeep", age: 30 });
console.log(localStorage.getItem("user"));

This will store [object Object] instead of the actual object. This is where JSON.stringify() and JSON.parse() come in handy.

JSON.stringify(): Converting an Object to a String

JSON.stringify() is used to convert a JavaScript object or array into a JSON-formatted string, making it suitable for storage in localStorage.

Example:

const user = { name: "Pradeep", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

Now, the stored value will be:

{"name":"Pradeep","age":30}

JSON.parse(): Converting a String Back to an Object

To retrieve and use the stored object, we need to convert the JSON string back to a JavaScript object using JSON.parse().

Example:

const storedUser = localStorage.getItem("user");
const userObject = JSON.parse(storedUser);
console.log(userObject.name); // Output: Pradeep

---

reference: w3school url: https://www.w3schools.com/