What is HTML5 Web Storage?

Using HTML5 to store user browsing data locally is a better way to store locally than cookies.

Earlier, local storage used cookies. But Web storage needs to be more secure and fast. The data is not stored on the server, but the data is only used by users to request website data. It can also store large amounts of data without affecting the performance of the website.

The data exists as a key/value pair, and the data of the web page only allows the web page to be accessed.

Browser support



Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support web storage.

Note : Web storage is not supported in Internet Explorer 7 and earlier versions of IE.

localStorage and sessionStorage 

There are two new objects that store data on the client:

localStorage - data storage without time limit

sessionStorage - data storage for a session

Before using web storage, you should check if your browser supports localStorage and sessionStorage:


localStorage object
There is no time limit for the data stored by the localStorage object. After the second day, the second week or the next year, the data is still available.

Run the program and try it out

Instance resolution:

Create a localStorage key/value pair using key="lastname" and value="Smith"

Retrieve the value of the key value "lastname" and insert the data into the element of id="result"

Tip : Key/value pairs are usually stored as strings, and you can convert the format to suit your needs. 

The following example shows the number of times a user clicked a button. The string value in the code is converted to a numeric type:

Run the program and try it out

sessionStorage object

The sessionStorage method stores data for a session. When the user closes the browser window, the data is deleted.

How to create and access a sessionStorage::

Run the program and try it out


Last Updated: 2018-07-06 12:32:44 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :