Join us on :

HTML5 Web Storage

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

Prior to 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 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.

TYPES OF WEB STORAGE

  • 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 browser may not have the webstorage, as they do not support HTML5. All modern browsers support the Webstorage 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 view-application-storage

Accessing Storage with Javascript Executor

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

Use the same way for doing the session storage. web-storage-selenium


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

Methods which are related to Local Storage

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.

window.localStorage.setItem("key","value"):

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 a 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")
									
local-storage-selenium

window.localStorage.getItem("key"):

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.


									window.localStorage.getItem("name")
									
getitem-local-storage

window.localStorage.removeItem("key"):

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.


									window.localStorage.removeItem("name")
									
remove-item-local-storage

window.localStorage.key(n):

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.


									window.localStorage.key(1)
									
get-key-with-index-webstorage

window.localStorage.length:

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


									window.localStorage.length
									
length-local-storage

window.localStorage.clear():

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??).


									window.localStorage.clear()
									
clear-local-storage
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 Augmenter and 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");
		localStorage.getItem("name");
		localStorage.removeItem("name");
		localStorage.size();
		localStorage.keySet();
		localStorage.clear();
		
		// using session storage
		SessionStorage sessionStorage = webStorage.getSessionStorage();
		sessionStorage.setItem("name", "chercher tech");
		sessionStorage.getItem("name");
		sessionStorage.removeItem("name");
		sessionStorage.size();
		sessionStorage.keySet();
		sessionStorage.clear();
    }
}

Limitations of Webstorage

As easy as it is to use Webstorage, 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

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions