HTML5 Web Storage

Web storage provides a way for your web applications to store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data. Cookies are also limited to about 4 KB of data, which might not be sufficient to store the required data.

Simply put, web storage allows large amounts of application data to be stored locally without affecting your web application’s performance.

Unlike cookies, the storage limit is far larger (at least 5MB), and the information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.


  • Local storage : window.localStorage stores data with no expiration date. The data in local storage would persist even when the user’s browser is closed and reopened.
  • Session storage : window.sessionStorage is similar to local storage, except that it stores data for one session only. Once the user’s browser is closed, that session would be lost, and the persisted data will be deleted from the browser

View Browser storage

Some browsers may not have web storage, as they do not support HTML5. All modern browsers support the Web storage, but it is always better to have a check whether a browser supports storage or not

if (typeof(Storage) !== "undefined") {
	// Code for localStorage
} else {
	// No web storage Support.

View Storage on Browser

You can view the browser storage visually, by navigating to Dev Console -> Application tab -> Storage Section -> Local/Session storage


Accessing Storage with Javascript Executor

We can handle the Web storage by running Javascript inside the browser using Javascript Executor. The below code showcases the basic syntax for handling the local storage in the browser.

Use the same way for doing the session storage.

// basic syntax
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("return localStorage.someMethodRelatedToStorage();");

Local storage is designed to work with key-value pairs; you’re required to set the key of the data before adding it. The localStorage object provides a couple of methods and properties that help us run it. There are few methods provided in javascript to handle the web storage, which are.


This method accepts two arguments. The first is the key you’d like to set on your value, and the second is the actual value. If you’d want to save username, you can use username as the key and store any value with it, similar to how you assign variables data.

window.localStorage.setItem("name", "chercher tech")



This method accepts one argument, which is the key that’s attached to the value. This returns the value of the key used. For instance, if you’d want to know the username stored, replace the work key with username in the statement above to get the value.




This method deletes the value of the key, along with the key itself. It leaves no evidence that the value existed nor the key. You can remove username information by passing username as an argument.




This method accepts a numerical argument that return’s the nth key in the storage. Since the order of the keys is user-agent defined (browser-specific), it’s highly discouraged to use it as results will vary from browser to browser stored with the same data.




This property works similar to arrays. It simply returns the number of objects stored locally. The returned value will always be of type number.




This method expects no arguments. It deletes all content stored in local storage but limits to the origin of the application. Therefore, if theoretically Facebook and Twitter store some data in your browser, when you use this method on Facebook’s page, your Twitter data won’t be affected, but all of Facebook’s data will be gone (But is it really your data??).



Somehow clear() method removed only the properties set by us and a few more, but few properties are not deleted. As of this moment, I not sure why.

Accessing Localstorage with Selenium

The RemoteWebDriver does not directly implement Selenium’s role interfaces such as WebStorage and LocationContext. To access that functionality, your driver needs to be augmented with an Augmenterand then cast to the appropriate interface:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.html5.LocalStorage;
import org.openqa.selenium.html5.SessionStorage;
import org.openqa.selenium.html5.WebStorage;
import org.openqa.selenium.remote.Augmenter;

public class WebstorageTest {
	public static void main(String[] args) {
		WebDriver driver = new FirefoxDriver();
		WebStorage webStorage = (WebStorage) new Augmenter().augment(driver);
		// using local storage
		LocalStorage localStorage = webStorage.getLocalStorage();
		localStorage.setItem("name", "chercher tech");

		// using session storage
		SessionStorage sessionStorage = webStorage.getSessionStorage();
		sessionStorage.setItem("name", "chercher tech");

Limitations of Web storage

As easy as it is to use Web storage, it is also easy to misuse it. The following are limitations and also ways to NOT use localStorage:

  • Do not store sensitive user information in localStorage
  • It is not a substitute for a server-based database as information is only stored on the browser
  • Storage is limited to 5MB across all major browsers
  • Storage is quite insecure as it has no form of data protection and can be accessed by any code on your web page.
  • Storage is synchronous, Meaning each operation called would only execute one after the other.
About Author :

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions