Editor’s note: This post was updated on 29 December 2020.
In this tutorial, we’ll show you how to use the localStorage
mechanism and Window.localStorage
property and review the basics of web storage in JavaScript.
We’ll cover the following in detail:
- What is the Web Storage API?
- What is the difference between
sessionStorage
andlocalStorage
? - What is
localStorage
in JavaScript? - Where is
localStorage
stored? - What is
Window.localStorage
? - How does
localStorage
work? localStorage
browser supportlocalStorage
limitations
What is the Web Storage API?
The Web Storage API is a set of mechanisms that enable browsers to store key-value pairs. It is designed to be much more intuitive than using cookies.
The key-value pairs represent storage objects, which are similar to objects except they remain intact during page loads, and are always strings. You can access these values like an object or using the getItem()
method (more on that later).
What is the difference between sessionStorage
and localStorage
?
The Web Storage API consists of two mechanisms: sessionStorage
and localStorage
. Both sessionStorage
and localStorage
maintain a separate storage area for each available origin for the duration of the page session.
The main difference between sessionStorage
and localStorage
is that sessionStorage
only maintains a storage area while the browser is open (including when the page reloads or restores) while localStorage
continues to store data after the browser is closed. In other words, whereas data stored in sessionStorage
is cleared when the page is closed, data stored in localStorage
does not expire.
In this tutorial, we’ll focus on how to use localStorage
in JavaScript.
What is localStorage
in JavaScript?
localStorage
is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.
For a visual refresher on how to use localStorage
in JavaScript, check out the video tutorial below:
Where is localStorage
stored?
In Google Chrome, web storage data is saved in an SQLite file in a subfolder in the user’s profile. The subfolder is located at \AppData\Local\Google\Chrome\User Data\Default\Local Storage
on Windows machines and ~/Library/Application Support/Google/Chrome/Default/Local Storage
on macOS
Firefox saves storage objects in an SQLite file called webappsstore.sqlite
, which is also located in the user’s profile folder.
What is Window.localStorage
?
The localStorage
mechanism is available via the Window.localStorage
property. Window.localStorage
is part of the Window
interface in JavaScript, which represents a window containing a DOM document.
The Window
interface features a wide range of functions, constructors, objects, and namespaces. Window.localStorage
is a read-only property that returns a reference to the local storage object used to store data that is only accessible to the origin that created it.
How does localStorage
work?
To use localStorage
in your web applications, there are five methods to choose from:
setItem()
: Add key and value tolocalStorage
getItem()
: This is how you get items fromlocalStorage
removeItem()
: Remove an item by key fromlocalStorage
clear()
: Clear alllocalStorage
key()
: Passed a number to retrieve the key of alocalStorage
setItem()
: How to store values in localStorage
Just as the name implies, this method allows you to store values in the localStorage
object.
It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.
window.localStorage.setItem('name', 'Obaseki Nosa');
Where name
is the key and Obaseki Nosa
is the value. Also note that localStorage
can only store strings.
To store arrays or objects, you would have to convert them to strings.
To do this, we use the JSON.stringify()
method before passing to setItem()
.
const person = { name: "Obaseki Nosa", location: "Lagos", } window.localStorage.setItem('user', JSON.stringify(person));
getItem()
: How to get items from localStorage
To get items from localStorage, use the getItem()
method. getItem()
Β allows you to access the data stored in the browserβs localStorage
object.
getItem()
accepts only one parameter, which is the key
, and returns the value
as a string.
To retrieve a user key:
window.localStorage.getItem('user');
This returns a string with value as:
β{βnameβ:βObaseki Nosaβ,βlocationβ:βLagosβ}β
To use this value, you would have to convert it back to an object.
To do this, we make use of the JSON.parse()
method, which converts a JSON string into a JavaScript object.
JSON.parse(window.localStorage.getItem('user'));
removeItem()
: How to delete localStorage
sessions
To delete local storage sessions, use the removeItem()
method.
When passed a key name, the removeItem()
method removes that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.
window.localStorage.removeItem('name');
clear()
: How to delete all items in localStorage
Use the clear()
method to delete all items in localStorage
.
This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters.
window.localStorage.clear();
key()
: How to get the name of a key in localStorage
The key()
method comes in handy in situations where you need to loop through keys and allows you to pass a number or index to localStorage
to retrieve the name of the key.
var KeyName = window.localStorage.key(index);
localStorage
browser support
localStorage
as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage
, you can check using the following snippet:
if (typeof(Storage) !== "undefined") { // Code for localStorage } else { // No web storage Support. }
localStorage
limitations
As easy as it is to use localStorage
, it is also easy to misuse it. The following are limitations, and also ways to NOT use localStorage
:
- Do not store sensitive user information in
localStorage
- It is not a substitute for a server based database as information is only stored on the browser
localStorage
is limited to 5MB across all major browserslocalStorage
is quite insecure as it has no form of data protection and can be accessed by any code on your web pagelocalStorage
is synchronous, meaning each operation called would only execute one after the other
With these, we have been armed with the power of localStorage
in our web applications.
LogRocket: Debug JavaScript errors more easily by understanding the context
Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.
LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!
Try it for free.
This post is awesome, it help me a lot.
Thanks and Pura vida from Costa Rica!
#keepCoding
Thanks you so much, actually I was storing my object values without converting them to string, and my logic was not working as expected, your post helped me alot
This is the kind of content I like. I’m referring one of my students to this page because they want to design a simple web interface that tracks days since [insert event].
Thanks! This really helped me.
Can you suggest any blog. I want to convert my web pages into PWAs.
Great post! Easy to follow and test in my dev tools as I read.
Thanks, this content helped me
My code works on local server but how to make it work if I put it in online.
Thanks. This post clear the concept of Local Storage in a very simple way. Helped me a lot.
This was really helpful. Thanks for sharing.
Screenshotted snippets of this article so I can quickly refer back to it later. Thanks you for your helpful article!