Utilizing JSON and localStorage for Data Storage and Exchange

JSON (JavaScript Object Notation) is a lightweight and human readable data format that is widely used for data interchange on the web. JSON can represent simple values, such as strings, numbers, booleans, and null, as well as complex values, such as arrays and objects.
localStorage is a web storage mechanism that allows JavaScript sites and apps to save key-value pairs in the browser, with no expiration date. This means that the data persists even after the user closes the browser or restarts the computer. localStorage can store up to 5 MB of data per domain, and it is only accessible to the origin that created it.
In this blog post, we will show you how to use JSON and localStorage to store and exchange data in JavaScript. We will cover the following topics:

• How to store data in localStorage using JSON.stringify()
• How to retrieve data from localStorage using JSON.parse()
• How to update and delete data in localStorage
• How to use localStorage events to synchronize data across tabs or windows.

How to store data in localStorage using JSON.stringify()

To store data in localStorage, we need to use the localStorage.setItem() method, which takes two parameters: a key and a value. The key is a string that identifies the data, and the value is the data that we want to store.

However, localStorage can only store strings, so if we want to store complex values, such as arrays or objects, we need to convert them into strings first. This is where JSON.stringify() comes in handy. JSON.stringify() is a built-in function that takes a JavaScript value and returns a JSON formatted string.

For example, suppose we have an array of objects that represents some products, like this:


var products = [
{name: "Laptop", price: 1000, category: "Electronics"},
{name: "Book", price: 20, category: "Books"},
{name: "Shoes", price: 50, category: "Clothing"}
];

To store this array in localStorage, we can use JSON.stringify() to convert it into a string, and then
use localStorage.setItem() to save it under the key “products”, like this:


var productsString = JSON.stringify(products); // convert the array into a JSON
string
localStorage.setItem("products", productsString); // store the string in
localStorage

Now, the data is stored in localStorage, and we can see it in the browser’s devtools, under the
Application tab.

How to retrieve data from localStorage using JSON.parse()

To retrieve data from localStorage, we need to use the localStorage.getItem() method, which takes one parameter: a key. The key is a string that identifies the data that we want to retrieve. The method returns the value associated with the key, or null if the key does not exist.

However, localStorage returns the value as a string, so if we want to use the value as a JavaScript
value, such as an array or an object, we need to convert it back from a string first. This is where
JSON.parse() comes in handy. JSON.parse() is a built-in function that takes a JSON-formatted string and returns a JavaScript value.

For example, suppose we want to retrieve the array of products that we stored in localStorage in the previous section. We can use localStorage.getItem() to get the string value, and then use JSON.parse() to convert it into an array, like this:


var productsString = localStorage.getItem("products"); // get the string value
from localStorage
var products = JSON.parse(productsString); // convert the string into an array

How to update and delete data in localStorage

To update data in localStorage, we can use the localStorage.setItem() method again, with the same key and a new value. The method will overwrite the existing value with the new value.

For example, suppose we want to update the price of the laptop product to 900. We can do this by modifying the products array, converting it into a string, and storing it in localStorage again, like
this:


products[0].price = 900; // modify the price of the first product in the array
var productsString = JSON.stringify(products); // convert the array into a JSON
string
localStorage.setItem("products", productsString); // store the string in
localStorage

To delete data from localStorage, we can use the localStorage.removeItem() method, which takes
one parameter: a key. The key is a string that identifies the data that we want to delete. The method
will remove the key and its value from localStorage.

For example, suppose we want to delete the book product from localStorage. We can do this by removing the second element from the products array, converting it into a string, and storing it in localStorage again, like this:


products.splice(1, 1); // remove the second element from the array
var productsString = JSON.stringify(products); // convert the array into a JSON
string
localStorage.setItem("products", productsString); // store the string in
localStorage

In this blog post, we have learned how to use JSON and localStorage to store and exchange data in JavaScript. We have seen how to use JSON.stringify() and JSON.parse() to convert JavaScript values into JSON strings and vice versa. We have also seen how to use localStorage.setItem(), localStorage.getItem(), localStorage.removeItem(), and localStorage.clear() to store, retrieve, update, and delete data in localStorage.We hope you have found this blog post useful and informative. If you have any questions or feedback, please leave a comment below. Happy coding
�