If you want to store data in the browser on the computer of the user, you can use the Web Storage API. You can store up to 5 Megabyte of data in the browser for your website. That’s enough for text data, like variables and arrays. But you should avoid storing image information in the Web Storage API.
Every domain (for example: ju.se, pixelkind.github.io, 127.0.0.1, …) have access to its own web storage. That means you cannot access data that was stored on the browser by another site and other sites cannot access data you stored. But the user can actually access the data you store.
Data is stored as a key-value pair. A key value pair is like a variable where the key is the name and the value your actual value. For example the key could be name and the value could be "Garrit". The value can only be a string.
The Web Storage API provides us with two methods to store data:
LocalStorage
The data is saved until the user removes it by hand, uninstall the browser or you remove it with JavaScript.
In the root of your website you have a variable available called localStorage. You can also access the same object through window.localStorage.
SessionStorage
The data is saved until the tab or window is closed. This way the data is only available for a browsing session.
In the root of your website you have a variable available called sessionStorage. You can also access the same object through window.sessionStorage.
In the following examples I will use the localStorage but you can just replace it by sessionStorage if you want to use it.
Writing to localStorage
You can assign a new value to a specific key with 3 different methods. The result is the same for all of them.
First you can use the dot syntax that you already know from JavaScript objects:
1
localStorage.name = "Tom";
The second method looks similar to how we access a value in an array, but instead of an index we use the key as string:
1
localStorage["name"] = "Tom";
The last method uses a function setItem. The first parameter is the name of the key and the second parameter is the value.
1
localStorage.setItem("name", "Tom");
As mentioned, all 3 methods work exactly the same way.
Reading from localStorage
To read a value from localStorage you have 3 different methods available.
The first looks like the one you know from objects in JavaScript.
1
2
const name = localStorage.name;
console.log(name);
The second method looks similar to how we access arrays in JavaScript, but instead of an index, you use the key name as a string.
1
2
const name = localStorage["name"];
console.log(name);
The last method uses the function getItem with the key name as parameter.
1
2
const name = localStorage.getItem("name");
console.log(name);
All 3 methods work exactly the same way.
Deleting from localStorage
To delete a key-value pair from localStorage you can use the method removeItem with the key name as parameter.
1
localStorage.removeItem("name");
If you want to delete everything from localStorage, you can use the method clear.
1
localStorage.clear();
Number of keys in localStorage
If you want to know how many keys you have in your localStorage, you can use the length property of localStorage.
1
2
const numberOfKeys = localStorage.length;
console.log(numberOfKeys);
You can find more information about using the Web Storage API here.