WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 web Storage


HTML5 web storage, a better local storage method than cookies.


What is HTML5 web storage?

Using HTML5, users' browsing data can be stored locally.

Earlier, local storage used cookies. However, Web storage needs to be more secure and fast. These data will not be stored on the server, but these data are only used by users to request website data. It can also store a large amount of data without affecting the performance of the website.

Data exists as key /value pairs. The data of a web page is only allowed to be used by that page.


Browser Support

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

Note: Internet Explorer 7 and earlier IE versions do not support web storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Local Storage Objects

The two objects on which the client stores data are:

  • localStorage-used to save the entire website's data for a long time. The saved data does not expire until manually removed.
  • sessionStorage-used to temporarily save data from the same window (or tab), which will be deleted after closing the window or tab.

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

if (typeof (Storage)! == "undefined") { // Yes! LocalStorage sessionStorage object is supported! // some code ... } else { // Sorry! Web storage is not supported. }

The localStorage Object

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

Example

localStorage.sitename = " Tutorial"; document.getElementById ("result"). innerHTML = "Site name:" + localStorage.sitename;
Try it yourself »

Instance analysis:

  • Create a localStorage key /value pair using key = "sitename" and value = " tutorial".
  • Retrieve the value whose key value is "sitename" and insert data into the element with id = "result"

The above example can also be written like this:

// store localStorage.sitename = "Rookie Tutorial"; // find document.getElementById ("result"). innerHTML = localStorage.sitename;

Remove "sitename" from localStorage:

localStorage.removeItem("sitename");
Regardless of whether it is localStorage or sessionStorage, the available APIs are the same. The following are commonly used (taking localStorage as an example):

  • Save the data: localStorage.setItem (key, value);
  • Read data: localStorage.getItem (key);
  • Delete single data: localStorage.removeItem (key);
  • Delete all data: localStorage.clear ();
  • Get the key of an index: localStorage.key (index);

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

The following example shows how many times a user clicked a button.

String value in code is converted to numeric type:

Example

if (localStorage.clickcount) { localStorage.clickcount = Number (localStorage.clickcount) +1; } else { localStorage.clickcount = 1; } document.getElementById ("result"). innerHTML = "You have clicked the button" + localStorage.clickcount + "times";
Try it Yourself »

The sessionStorage Object

The sessionStorage object is equivalent to the localStorage object, except that it stores the information for just a single session. The information is erased when the client shuts the explicit program tab.

The following precedent tallies the occasions a client has clicked a catch, in the current session:

Example

in the event that (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have tapped the catch " +
sessionStorage.clickcount + " time(s) in this session.";
Try it Yourself »