How to use local storage?

Basic Definition:

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends that is when the page is closed.

Data stored in either localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different localStorage object from the same site accessed with HTTPS (e.g.https://example.com).

The simplest way to access local storage from our browser local like this

window.localStorage

which returns an object with the data stored in our browser's local storage.

The type of data you want to store in local storage should be key-value pairs which are always in the UTF-16 DOMString format, which uses two bytes per character. If you want to store objects and arrays they can also be stored by converting them into strings.
Methods available on storage object:

Setting data to storage object:

window.localStorage.setItem("mode","dark");

Using the above method you can set a key to a value, here I am setting mode to a value called dark.

Getting data from storage object:

window.localStorage.getItem("mode");

Using the above method you can get the value of the mode key that we previously set in the storage object.

Removing data from storage object:

window.localStorage.removeItem('mode');

Using this we can remove the value of the particular key from the storage object.

Remove all the items from the storage object:

window.localStorage.clear();

Using this method we can remove all the key-value pairs from the storage object. This can use in cases where the user logs out from the application.

Now we will see how you can set an object or an array to the storage object:

let user = {
      name: "sridhar",
      city: "Hyderabad"
}
or 
let numbers = [1,2,3,4,5]

To store these kinds of object user or numbers array, you have to convert them to strings by JSON.stringify method.

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

To access the above kind of data from the storage object you have to parse the data coming from the storage object like this

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

Let me show a small Demo:

Here I am using the chrome browser in Incognito mode, where I am showing where you see the local storage in your browser and how you can interact with it.

https://youtu.be/h7_3kQlYsm4

References:

MDN Docs links:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://developer.mozilla.org/en-US/docs/Web/API/DOMString

If you have any doubts related to this article or anything related to tech or software engineering in general, drop a comment here or you can message me here sridhar katta

What is Local Storage in browsers and How can you use it?

Comments

More from this blog

NPM Tricks I Wish I Knew Sooner

My GitHub Setup, Tricks & Daily Commands

Supercharge Your Terminal Workflow with Atuin

Big Companies vs. Small Startups: What's the Difference?

My 2023: A Year of Challenges and Triumphs

Let me show a small Demo:

References:

Command Palette

Comments

More from this blog

Let me show a small Demo:

References: