Use local storage in JavaScript

October 29, 2019

Why local storage?

Local storage provides a way of storing user's data in the web browser. Actually, web developers stored user's data in web browsers for a long time by using cookies. However it's not really what cookies were designed for. Cookies is a way of storing user's data that not just stored in a browser but also sent to the website's web server with every HTTP request. However in some cases you don't need to send such data to the web server but just need to keep it locally. For example, you could save some non-sensitive form data in local storage for autocompletion purposes.

Local storage operations

Page's local storage is accessible via window.localStorage property. There are four operations you can perform on the local storage.

Put a named value into the storage:

window.localStorage.setItem("name", "Sam");

Get a value by its name from the storage:

let name = window.localStorage.setItem("name");

Remove a value by its name from the storage:

window.localStorage.removeItem("name");

And clear the entire storage:

window.localStorage.clear();

Also you can access the local storage as an array:

window.localStorage["name"] = "Sam";
let name = window.localStorage["name"];

You can also iterate over its properties. Note that this will iterate over its member functions and length property as well:

for(const name in window.localStorage)
{
    console.log(name, window.localStorage[name]);
}

Also note that length is an inherited property so you can't have a value called length in the local storage. If you try to store a value named length it won't generated an error but will be silently ignored.

Data types

Both name and value should have string type. If you put an integer into the storage then it will be converted to a string. You can't put JavaScript objects into the storage. However that could be easily overcame by converting the object to or from JSON:

let person =
{
    name : "Sam",
    age : 25
};

window.localStorage["person"] = JSON.stringify(person);
person = JSON.parse(window.localStorage["person"]);

Scope of visibility

Each origin has its own local storage. It cannot be shared between different domains, it is not shared between subdomains of the same domain as well as between subdomains and the main (second level) domain. Also it is not shared between different protocols, which means that http://samblog.com and https://samblog.com has different local storages. Also it is not shared between different ports, like http://samblog.com:80 and http://samblog.com:8088.

Lifetime

Unlike cookies, local storage is persistent, which means that it values will never expire.

Session storage

There is a special type of a local storage — a session storage. It has the same interface as a local storage and can be accessed via window.sessionStorage property:

window.sessionStorage.setItem("name", "Sam");
console.log(window.sessionStorage.getItem("name"));

There are a couple of behavior differences from the local storage though:

Session storage is not persistent. It is deleted right after you close a tab or a window.

Session storage of the same origin is not shared between tabs or windows. If you open the same page in another tab then a new session storage will be created for that tab.

Shorten names

You can access both local storage and session storage without explicit window. reference:

sessionStorage["name"] = localStorage["name"];

Security

You should never keep any sensitive information in a local storage.

Rate this post:

Share this page: