Storing data in browser
Both localStorage
and sessionStorage
are parts of Web Storage API and can be used to store key/value
pairs locally inside a browser. Data saved in both of these places won't be erased after page refresh (for sessionStorage
), and surprisingly, after browser restart (localStorage
). But you can ask a question - we have well known and opinionated cookies so why we even bother using local/sessionStorage
. Here are the three main advantages of localStorage/sessionStorage
over cookies:
- we store all data locally and we don't send them with every request inside its header straight to a server, it's recommended from the security point of view, it is directly connected with the next advantage,
- thanks to not sending this data with every request, we can save up to 10 MB of data for most of modern browsers,
- API is very easy to understand in a short period of time and ease to use in our projects
In that situation cookies are definitely are loosing their position. However, they are still usable particularly for all operations related to authentication - but more on this in different article.
Local and session
Both have the same API and its usage is practically identical. In terms of choosing one of them we mostly take into account how long we need to keep saved data. Further part of this article will consist of examples for localStorage
but it's worth to mention that these examples will work the same with sessionStorage
syntax. Data stored in localStorage
is accessible in the browser between its tabs and windows if they comes from the same origin - if the changes occurred in the other window (but in the same origin - path may be different) - they will be visible in other windows.
Writing and reading
To write new key/value pair in the localStorage
we use setItem()
method - it takes two arguments, the key and corresponding value
localStorage.setItem("kangaroo", "🦘");
To read the value we use getItem()
method. It accepts only one argument - previously used key. It returns corresponding value in the form of a string.
const myItem = localStorage.getItem("kangaroo");
Updating and deleting
To update the value stored in the localStorage
we use the same method as in the case of creating new entry - we use the same key but with different argument containing new value.
localStorage.setItem("panda", "🐼")
*// myItem = "🐼"*
We can remove value from localStorage
using two methods. Using removeItem()
which accepts one argument being the key of the localStorage
object:
localStorage.removeItem(key);
or remove all items inside the localStorage
using clear()
method:
localStorage.clear();
Storing different types of data
Using localStorage
we can store only values of type string. Often we will come across the situation when we want to store whole objects. We can achieve that using JSON.stringify()
and JSON.parse()
methods in the following way:
To add and update:
let myObj = { country: "🇮🇹", dish: "🍕" };
localStorage.setItem(key, JSON.stringify(myObj));
This allows as to save inside the localStorage
as a string, not as an object. Due to this, to reuse this object we have to transform our data to the type of object:
let item = JSON.parse(localStorage.getItem(key))
*// item = { country: "🇮🇹", dish: "🍕" }*
That way variable item
takes the value of the object key
and its type is an object so we can perform all operations related to Javascript's objects.
Checking the storage
From time to time we need to check whether we have some value assigned to a localStorage
. For this purpose we can use following syntax:
if (localStorage.length > 0) {
// ...
}
If localStorage
contains at least one element, if will return true
. localStorage.length
informs us about the number of saved items.
Summary
Both localStorage
and sessionStorage
allows us to store key/value pairs in the browser
- key and value have to be of type string
- size of saved data can be greater than 5MB
- they don't expire
- data is connected with the origin
localStorage
- shared between every tab and window related to the same origin, not erased after browser restart
sessionStorage
- accessible inside browser's tab from the same origin, not erased after page refresh but after closing the tab.
Top comments (0)