HTML5 Local storage Web Storage easy to understand

? The HTML5 local storage specification defines two important api:web Storage and local database Web SQL databases.

The local storage Web Storage is actually an improved version of the HTML4 cookie storage mechanism, but the functionality of the two mechanisms is different. The role of Web Storage is to store useful information in a Web site on a local computer

Or on a mobile device, and then read the information locally based on the actual need.

The Web Storage provides two types of storage API interfaces: Sessionstorage and Localstorage.
Sessionstorage: Valid during the session;
Localstorage: Permanent unless the user or program performs a delete operation on it;

How to detect whether the browser supports Web storage code as follows:

if (window.localstorage) {    //browser support Localstorage}if (window.sessionstorage) {    //browser support Sessionstorage}

Let's take a look at the following API for storage defined in the HTML5 specification:

Interface storage{    readonly attribute unsigned long length;    Domstring? Key (in unsigned long index);    Getter Domstring GetItem (in Domstring key);    Setter creator void SetItem (in domstring key,in domstring value);    deleter void RemoveItem (in domstring key);    void Clear ();

? From the interface defined by the specification, the number of interfaces is not many, only the length is the property, the rest is the method.
where GetItem and SetItem each other for a pair of setter and getter method, if there is object-oriented knowledge, see the definition of this method name, must not feel unfamiliar.
The primary function of the RemoveItem method is to delete a key/value (key/value) pair.
The clear method works by removing all key-value pairs.

Explore how to use the various APIs of storage, as follows:

Localstorage.setitem ("name", "Stored content"!!! ");//store content Localstorage.getitem (" name ");  Read content Localstorage.key (1);  Remove the key value Localstorage.removeitem ("name");  Delete Itemlocalstorage.clear () with the specified key "name";//delete localstorage all data

Exercise 1 code is as follows

<!--prompts the browser to support Localstorage--><div id= "msg" style= "color: #f00;" ></div>
?
HTML5 Local storage Web Storage easy to understand