HTML5-Web storage, html5 Storage

HTML5-Web storage, html5 Storage

Web storage, a better local storage method than cookies

LocalStorage and sessionStorage

　　LocalStorage-data storage with no time limit

　　SessionStorage-data storage for a session

// Whether if (typeof (Storage )! = "Undefined") {// yes! Supports localStorage sessionStorage objects! // Some code...} else {// sorry! Web storage is not supported .}

LocalStorage object

There is no time limit on the data stored in localStorage object.

LocalStorage. sitename = "Pumpkin"; document. getElementById ("result"). innerHTML = "website name:" + localStorage. sitename;

The APIs available for both localStorage and sessionStorage are the same. Common APIs are as follows (using localStorage as an example ):

Save data: localStorage. setItem (key, value); read data: localStorage. getItem (key); delete a single data: localStorage. removeItem (key); Delete all data: localStorage. clear (); obtain the key of an index: localStorage. key (index );

 Prompt: Key-value pairs are usually stored as strings. You can convert the format as needed.

If (typeof (Storage )! = "Undefined") {if (localStorage. clickcount) {localStorage. clickcount = Number (localStorage. clickcount) + 1;} else {localStorage. clickcount = 1;} document. getElementById ("result "). innerHTML = "you have already clicked" + localStorage. clickcount + "times";} else {document. getElementById ("result "). innerHTML = "sorry, your browser does not support web storage. ";}

SessionStorage object

SessionStorage stores data for a session. When the user closes the browser window, the data will be deleted.

If (typeof (Storage )! = "Undefined") {if (sessionStorage. clickcount) {sessionStorage. clickcount = Number (sessionStorage. clickcount) + 1;} else {sessionStorage. clickcount = 1;} document. getElementById ("result "). innerHTML = "you have already clicked this button in this session" + sessionStorage. clickcount + "times";} else {document. getElementById ("result "). innerHTML = "sorry, your browser does not support web storage ";}

Simple website list program

<Div style = "border: 2px dashed # ccc; width: 320px; text-align: center;"> <label for = "sitename"> website name (key ): </label> <input type = "text" id = "sitename" name = "sitename" class = "text"/> <br/> <label for = "siteurl"> network Address (value): </label> <input type = "text" id = "siteurl" name = "siteurl"/> <br/> <input type = "button" onclick = "save () "value =" add record "/> 
Running result:

JSON. stringify
　Stores object data and converts the object to a string.
Var site = new Object;... var str = JSON. stringify (site); // convert the Object to a string
JSON. parse
Converts a string to a JSON object.
<Div style = "border: 2px dashed # ccc; width: 320px; text-align: center;"> <label for = "keyname"> alias (key ): </label> <input type = "text" id = "keyname" name = "keyname" class = "text"/> <br/> <label for = "sitename"> website Name: </label> <input type = "text" id = "sitename" name = "sitename" class = "text"/> <br/> <label for = "siteurl"> address: </label> <input type = "text" id = "siteurl" name = "siteurl"/> <br/> <input type = "button" onclick = "save () "value =" add record "/> 
The above is the result of JSON. stringify conversion.
The following is the JSON. parse conversion result.