Web Storage API - Explain Like I'm Five

Web browsers today have a huge range of features, and more and more will get them.

We all know about cookies in our browsers, but browsers today have a special feature called the Web Storage API that allows us to temporarily or permanently store values.

What is the Web Storage API?

The Web Storage API is a browser functionality that can store data in key-value format. The purpose of this browser API is to make the site more intuitive than cookies.

A big advantage of the Web Storage API is that values are stored even if the user closes the browser.

But where is the data stored? Data stored using the Web Storage API is stored in an SQLite file in the user's local folder.

The data stored in localStorage and sessionStorage can be accessed anywhere in the application with the JavaScript code.

Difference between localStorage and sessionStorage

The Web Storage API has two data storage functions, localStorage and sessionStorage, the main difference between the two being that localStorage remains stored in the browser until it is deleted (it can also be permanent). However, SessionStorage is only stored until the user closes the browser. SessionStorage is a useful thing if you want to save some value in a browser instead of a cookie.

In this article, I will focus on localStorage, but almost all functions and features are the same as sessionStorage.

LocalStorage

LocalStorage, as I mentioned earlier, stores data in key-value format.

localStorage knows five main functions that can be used anywhere within the application.

These features are:

• setItem(), the function allows us to store values in localStorage,
• getItem(), allows us to retrieve a specific value from localStorage,
• removeItem(), the function allows us to remove key with value from localStroage,
• clear(), the function clears all localStorage,
• key().

setItem()

With this feature, we can store the value in our localStorage.

Using the feature is very simple. The function accepts two parameters, the first is the key and the second is the value of this key.

window.localStorage ("key", "value");

In localStorage we can store different data types such as string, int, bool, object…

The JSON.stringify function allows us to save a JSON object to localStorage.

const user = {
    id: 12345,
    name: "John Doe",
    email: "john.doe@example.com",
}

window.localStorage.setItem('user', JSON.stringify(user));

getItem()

With this function, we can get the value stored in localStorage. The function accepts one parameter, which is the value we want to get from memory.

window.localStorage.getItem ('user');

The function will return a string with the value:

"{" id ": 12345," name ":" John Doe "," email ":" john.doe@example.com "} '

Since such a string cannot be used in our application, it must be returned to the JSON object. This is done with the JSON.parse() function

JSON.parse(window.localStorage.getItem('user'));

removeItem()

The removeItem() function is used to remove only one element from localStorage.

The function accepts only one parameter and that is the name of the key we want to remove from localStorage. Removes the item if the key exists.

window.localStorage.removeItem ('user');

clear()

With the clear() function, we remove all elements in localStorage.

The function does not accept any parameters.

window.localStorage.clear();

Disadvantages of localStorage

Everything has its drawbacks and so does localStorage, one of the biggest is limiting the amount of data we can store to 5 MB.

Another drawback is that localStorage is synchronous, which means that items can be accessed gradually.

I hope I have introduced you to how we can store data in a browser in a different way.

Let's connect:

🔹Twitter

🔹Instagram

🔹GitHub

🔹PolyWork