DEV Community

Cover image for How to use Local Storage in JavaScript?
Gopi Krishna
Gopi Krishna

Posted on • Updated on • Originally published at gopikrishna.dev

How to use Local Storage in JavaScript?

This article was originally published on my blog. Feel free to check it out

Local storage allows us to store the data in the user's browser. The data stored will not be deleted even after the browser is closed.

The data will be stored in the form of key/value pairs. Both keys and values are always strings.

Storing the data

For example, we have a user whose preferences/settings needs to be stored in the localStorage. Let's create a userPreferences object with the user settings.

const userPreferences = {
    darkMode: true,
    accentColor: 'red',
}
Enter fullscreen mode Exit fullscreen mode

Now, we'll store it in the browser using localStorage.setItem method

localStorage.setItem("userData", JSON.stringfy(userPreferences))
Enter fullscreen mode Exit fullscreen mode

Here userData is key and userPreferences is the value. The reason we are using JSON.stringfy method is to convert the userPreferences object to a string.

Retrieving the data

When we need to use the data, we can retrieve it using localStorage.getItem method by passing the key as the argument. The data returned will be in the form of a string, so we need to use JSON.parse method to convert it into an object.

let userData = localStorage.getItem("userData") //"{ darkMode: true, accentColor:'red'}"

//convert the string to an object
userData = JSON.parse(userData)

console.log(userData) // { darkMode: true, accentColor: 'red'}
Enter fullscreen mode Exit fullscreen mode

Clearing the data

If you want to clear all the data stored in the local storage, we need to use localStorage.clear method.

localStorage.clear()
Enter fullscreen mode Exit fullscreen mode

Removing the particular data

If you want to remove data for a particular key, we need to use localStorage.removeItem method by passing key as the argument.

localStorage.removeItem("userData").
Enter fullscreen mode Exit fullscreen mode

Session Storage

sessionStorage is same as localStorage . But the main difference is, the data stored will be cleared automatically when the user closes the web page. All the methods are also the same.

Limitations

Do not store any sensitive data in the local storage as it can be accessed by anyone browsing the page. And there is no form of data protection.

Example

If you're reading this on Dev.to, Open the developer tools by pressing ctrl(cmd) + shift + I and go to Application → Local Storage. There you'll find how Dev.to using local storage for storing user details with the key current_user.

If you're reading this on my blog, repeat the above steps and you'll see how I'm using local storage for persisting the dark mode using the key darkMode.

Thank You.

Reference

LocalStorage - MDN

Session Storage - MDN

Top comments (4)

Collapse
 
emma profile image
Emma Goto 🍙

Also if you need to let your local storage expire after a certain amount of time, store.js is a pretty useful library for local storage that lets you do that.

Collapse
 
arberbr profile image
Arber Braja

Thank you have been using localStorage in couple of projects and never used store.js. Always good to know there is such a way to make localStorage works like a cookie.

Collapse
 
v0idifier profile image
void

you can just do

localStorage.xyz = 420
delete localStorage.xyz

feels more natural.

Collapse
 
bgopikrishna profile image
Gopi Krishna

I know that, but I don't think it is a good practice to follow.