Skip to main content

Web Storage in JS – How to Use localStorage and sessionStorage

Web storage is the JavaScript API browsers provide for storing data locally and securely within a user's browser.

  • Web storage is sometimes called DOM storage.
  • Web storage stores only string data types. Most browsers will automatically convert any other data type to string.
  • Web storage permits using JSON to store JavaScript objects.

Types of Web Storage

The two main types of web storage are:

  • Session storage (Window.sessionStorage)
  • Local storage (Window.localStorage)

The two web storages are similar to regular properties objects but persist (do not disappear) when the webpage reloads.

What Is the Window.sessionStorage Object?

The Window.sessionStorage web storage object stores data that persists for only one session of an opened tab.

In other words, whatever gets stored in the Window.sessionStorage object will not disappear on a reload of the web page. Instead, the computer will delete the stored data only when users close the browser tab or window.

Note the following:

  • The Window.sessionStorage object's storage limit is much larger than a cookie.
  • The data stored inside the session storage is per-origin and per-instance. In other words,'s sessionStorage object is different from's sessionStorage object because the two origins use different schemes.
  • Per-instance means per-window or per-tab. In other words, the sessionStorage object's lifespan expires once users close the instance (window or tab).
  • Browsers create a unique page session for each new tab or window. Therefore, users can run multiple instances of an app without any interference between each instance's session storage. (Note: Cookies do not have good support for running multiple instances of the same app. Such an attempt can cause errors such as double entry of bookings.)
Buy CSS Grid book

What Is the Window.localStorage Object?

The Window.localStorage web storage object stores data that persists even when users close their browser tab (or window).

In other words, whatever gets stored in the Window.localStorage object will not disappear during a reload or reopening of the web page or when users close their browsers. Those data have no expiration time. Browsers never clear them automatically.

The computer will delete the Window.localStorage object's content in the following instances only:

  1. When the content gets cleared through JavaScript
  2. When the browser's cache gets cleared

Note the following:

  • The Window.localStorage object's storage limit is larger than the Window.sessionStorage.
  • The data stored inside the local storage is per-origin. In other words,'s localStorage object is different from's localStorage object because the two origins use different schemes.
  • There are inconsistencies with how browsers handle the local storage of documents not served from a web server (that is, pages with a file: URL scheme). Therefore, the localStorage object may behave differently among different browsers.

How to Access the Web Storage

You can access the two web storage objects by:

  1. Using the same technique for accessing regular JavaScript objects
  2. Using the web storage's built-in interfaces

For instance, the three statements below do the same thing (that is, they set bestColor's value). But the third line is recommended because it uses web storage's setItem() method.

sessionStorage.bestColor = "Green";
sessionStorage["bestColor"] = "Green";
sessionStorage.setItem("bestColor", "Green");

The two web storages are properties of the global Window object. Therefore, sessionStorage.setItem() is equivalent to window.sessionStorage.setItem().


Always use web storage's built-in interfaces. By so doing, you will avoid the pitfalls of using objects as key/value stores.

What Is a Web Storage Built-In Interface?

Web storage's built-in interfaces are the recommended tools for reading and manipulating a web storage object.

The six main types of web storage built-in interfaces are:

Web Storage vs. Cookies: What's the Difference?

Below are the differences between web storage and cookie.

Storage limit

Cookie: Have 4 kilobytes maximum storage limit.

Web storage: Can store a lot more than 4 kilobytes of data. For instance, Safari 8 can store up to 5 MB, while Firefox 34 permits 10 MB.

Data transfer to the server

Cookie: Transfers data to the server each time browsers send HTTP requests to the web server.

Web storage: Never transfers data to the server.


It is a waste of users' bandwidth to send data to the server if such information is needed only by the client (browser), not the server.

Weak integrity and confidentiality

Cookie: Suffers from weak integrity and weak confidentiality issues.

Web storage: Do not suffer from weak integrity and confidentiality issues because it stores data per-origin.


Web storage: Web storage is a property of the Window object.

Cookie: Cookie is a property of the Document object.


Web storage: Browsers determine web storage's expiring date.

Cookie: You can specify a cookie's expiration date.

Retrieving individual data

Web storage: You can choose the specific data you wish to retrieve.

Cookie: There's no way to retrieve individual data. You always have to recall all the data to read any single one.

The syntax for storing data

Web storage:

webStorageObject.setItem(key, value);


document.cookie = "key=value";

The syntax for reading data

Web storage:




The syntax for removing data

Web storage:



document.cookie = "key=; expires=Thu, 01 May 1930 00:00:00 UTC";

The snippet above used an empty value and a past expiration date to delete the cookie.


This article discussed what web storage is. We also discussed the two types of web storage and how they compare with cookies.