What is the web in HTML5? What are the elements in Web Storage?

HTML5 Web Storage, a better local storage method than a cookie. This article describes the meaning and element resolution of HTML5 Web Storage.

What is HTML5 Web storage?

Use HTML5 to store the user's browsing data locally.

Earlier, local storage was using cookies. But Web storage needs to be more secure and fast. This data is not saved on the server, but it is used only for user requests for Web site data. It can also store large amounts of data without compromising the performance of the site.

Data exists as a key/value pair, and the Web page's data is only allowed to be used by that page.

The two objects that the client stores data are:

localstorage -for long-term preservation of the entire Web site data, the saved data does not expire until manually removed.

sessionstorage -Used to temporarily save data for the same window (or tab), which will be deleted after closing the Window or tab page.

Before using Web Storage, you should check whether your browser supports localstorage and sessionstorage:

if (typeof (Storage)!== "undefined") {    //YES! Support Localstorage  Sessionstorage Object!    Some code .....} else {    //sorry! Web Storage is not supported. }localstorage Object

The data stored by the Localstorage object has no time limit. Data is still available after the second, second, or next year.

Localstorage.sitename= "topic.alibabacloud.com Tutorial";d Ocument.getelementbyid ("result"). Innerhtml= "Site name:" + Localstorage.sitename;

Instance parsing:

Use key= "sitename" and value= "rookie Tutorial" to create a Localstorage key/value pair.

Retrieves the value of the key value "sitename" and then inserts the data into the element id= "result".

The above example can also be written like this:

Storage Localstorage.sitename = "topic.alibabacloud.com tutorial";//Find document.getElementById ("result"). InnerHTML = Localstorage.sitename;

Remove the "sitename" in Localstorage:

Localstorage.removeitem ("SiteName");

Whether it is localstorage, or sessionstorage, can use the same API, commonly used are the following (in the case of Localstorage):

• Save data: Localstorage.setitem (Key,value);

• Read data: Localstorage.getitem (key);

• Delete individual data: Localstorage.removeitem (key);

• Delete all data: Localstorage.clear ();

• Get the Key:localStorage.key (index) of an index;

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

The following example shows the number of times a user clicked a button.

The string values in the code are converted to numeric types:

Instance

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";

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:

Instance

if (sessionstorage.clickcount) {Sessionstorage.clickcount=number ( Sessionstorage.clickcount) +1;} else{Sessionstorage.clickcount=1;} document.getElementById ("Result"). Innerhtml= "In this session you have clicked the button" + Sessionstorage.clickcount + "times";