The web storage API provides mechanisms for the client’s browser to securely store and easily access key-value pairs. This is useful for storing simple data such as usernames or emails, as well as checking whether a user can access a particular resource by storing data such as access and refresh tokens.
window.localStorage to retrieve any data saved in it.
localStorage. We’ll also learn the differences between
sessionStorage, and cookies, as well as the benefits and drawbacks of using cookies instead of
LocalStorage is a web storage mechanism that allows us to store data on the client’s browser that persists even after the browser window is closed. Data stored here can be accessed throughout a particular domain. For instance, data stored in the
localStorage object from
www.example.com can be accessed by any page on this domain.
And, according to w3schools, “the
localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year.”
localStorage vs. cookies
sessionStorage is a web storage API that is used on the client-side to store data for a specific domain. It’s similar to
window.localStorage, but it has an expiry time.
window.sessionStorage is active as long as the tab or browser is open and persists through page reloads and restores. When a document is loaded into a browser tab, a new page session is created and assigned to that tab. That page session is only valid for the tab in question.
Note: data stored in
sessionStorageis distinct to that page’s protocol. This means that data stored on a site accessed via HTTP is stored on a different
sessionStorageobject than data stored on the same site accessed via HTTPS.
localStorage works similarly to
sessionStorage, but the difference is that data stored in
localStorage is persistent and lasts forever for that specific domain unless the browser’s cache is cleared or we clear
Note: when the last private tab is closed, data stored in the
localStorageobject of a site opened in a private tab or incognito mode is cleared.
HTTP cookies, on the other hand, are text files that a website’s server creates and sends to new users who visit the site. When you connect, the server generates the information that is saved in a cookie. This information is labeled with an ID that is unique to you and your computer.
Cookies contain information that is specific to a particular user and is used to identify that user. They save data such as authentication information, shopping cart information, and so on to help personalize a user’s experience. They can, however, be a privacy nightmare, as we’ll see in the following section.
Using cookies for web storage
In this section, we’ll look at some of the pros and cons of working with cookies over
- Cookies are better suited for performing authentication-related tasks. They are sent to the server in the HTTP headers from the browser, as opposed to using
sessionStorage, which are only accessed by the application as client-side data storage
- Cookies can be marked as HTTP only, limiting XSS (cross-site scripting) attacks to the user’s browser during the session, but this does not guarantee full immunity to XSS attacks
The cons of using cookies
- Cookies are prone to cyber attacks, and hijacked cookies can enable access to a user’s browsing sessions.
- Third-party cookies are a privacy nightmare. They are created by a site that’s different from the current site you’re viewing. They are usually linked to ads on a webpage, so visiting a site with seven ads may generate seven cookies, even if a user doesn’t click on an ad
localStorage, web applications can store an entire user-authored document on the client-side for performance reasons, but cookies do not handle this well, as they’re transmitted with every request made to the server
- Storage capacity for cookies is only about 4KBm in contrast to
localStoragecapacity of 10MB
When working with the
window.localStorage object, you should be familiar with the following methods:
localStorage object using the
getItem methods, as well as two JSON methods,
setItemmethod is used to add data to a web storage object. It takes in two arguments, a key and value pair,
getItemmethod returns the value of the key name that’s passed to it, such as
JSON.stringifymethod converts any object or acceptable value into a string JSON
JSON.parsemethod converts a string into its corresponding object or value as described by the string
localStorage using the methods mentioned above:
In the code block, we used the
[object, object] response, as shown in the image.
[object object] is a string representation of an object instance, but its value is never read.
getItem method on the
If we try to retrieve the object without first parsing it, we would get back a string as a response. Here’s what I mean:
Types of data that can be stored as a JSON string
Some data types are not JSON-safe, and if such values are found during conversion, they are either excluded in an object or changed to
null in an array.
Primitive data types like numbers, booleans, and strings are JSON-safe, while values like functions, undefined, symbols, date-objects are not JSON-safe.
window.localStorage object. We can store more user information in a single key this way.
localStorage by first converting them to strings with the
JSON.stringify method, then back to objects with the
Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.
It might be worth noting that there is a limit (~5mb) to how much you can store in localstorage. There are strategies to minify the data and still store it as JSON