Use local storage in JavaScript
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.