Web storage, different ways to persist the data
There are multiple options to do that:
- Web storage
- Indexed database API
HTTP cookie is a small peristent piece of data, stored in the user browser for specified period of time. Cookies are scoped by a domain. Meaning a cookie from google.com can't access cookies from bing.com and vice versa. Unlike other types of web storage, cookies are supported in all browsers. The average browser limit is 4Kb per domain. They are commonly used to hold important information the state like authentication, shopping cart items, selected filters and other.
HTTP only cookie
These kind of cookies are only available server side and can't be accessed by
document.cookie on the client. This type of cookies is more secure as it prevents XSS attacks.
Session cookie clears when user closes the browser. It's behaving similar to sessionStorage. It's helpful when there is a need to perist the state while user is using the application and browsing between different pages or parts of the app.
It's a simple key/value storage API. All modern browsers support web storage API, but with some limitaitons. One thing to keep in mind is a user can explicitly disable it through browser settings. For example mobile safari in private mode disables localStorage automatically. So you always want to check if it's available.
LocalStorage is one of the types of web browser's persistent storage. Using localStorage is useful to store text value (or stringified JSON). Up to 5mb. Unlike sessionStorage which clears when a user closes the window, localStorage persists until a user clears the data.
Expiration date is not supported but there is a way to add expiration date and time to localStorage. It doesn't work the same way as cookie does. I will cover this later. localStorage can also be easily modified from the browser's dev tools. So, evaluate other options if you need to store sensitive information. LocalStorage is scoped to the domain, so only domain that created key/value can access it. Essentially, it's as secure as the cookie.
Even though expiration is not supported in localStorage as it is a simple key/value store, there is a way to be creative and make it work. This may be handy for displaying some date or time sensitive information to the user, like banners or tool tips or recently searched data.