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.”
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.
In this section, we’ll look at some of the pros and cons of working with cookies over
sessionStorage, which are only accessed by the application as client-side data storage
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
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:
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.
Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.
ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.
Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.