HTML5 New Web Storage method

The two objects that the client stores data are:
Two objects are not used in any way, the only difference is the effective time of the stored data
①localstorage-No time limit for data storage unless manually deleted, the data will remain in the local file;
②sessionstorage-Data store for a session when the browser is closed, the sessionstorage is emptied;

before using Web Storage, you should check whether your browser supports localstorage and sessionstorage:
[Storage data storage]
1, storage can be like ordinary objects, use. Append or read the latest data.
Eg:localstorage.username= "Zhang San";
2. Commonly used functions
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;

Detecting whether the browser supports Web Storage

if (typeof (Storage)!== "undefined") {             alert ("Support");                       } else {           alert ("Not supported")                        }

How do I add a new piece of data?

1, access to the input of various information
2. Encapsulate this information as an object.
3. From the local file, read out the array string that stores the data. And the string, back to the array format.
If the local file does not have this array, a new array is stored.
4, in the array, push into a newly-formed object.
5. Re-convert the new array to a string. Drop the string back into the file.
6. Re-read one side of the file and reload the table.

How do I add a new piece of data?

1, from the file, read out the string, back to the array format.
2, the decision needs to delete the first few data.
3, delete the data corresponding to the array, splice
4. Re-convert the new array to a string and put back the file.
5. Re-read one side of the file and reload the table.

For example:

Site Name:<input type="text"Id="wangzhanming"/><br/>Aliases:<input type="text"Id="bieming"/><br/>Website:<input type="text"Id="Wangzhi"/><br/> <input type="Button"Value="New website"onclick="Addsite ()"/><br/> <!--<input type="Button"Value="New website"onclick="Showdia ()"/>--> Site Name:<input type="text"Id="LoginName"/><br/>Website:<input type="text"Id="loginpwd"/><br/> <input type="Button"Value="Login Website"onclick="Login ()"/><br/> "Button"Value="Delete a Web site"onclick="Delsite ()"/> <input type="text"Placeholder="Site name"Id="Search1"/> <input type="text"Placeholder="aliases"Id="SEARCH2"/> <input type="text"Placeholder="website"Id="Search3"/> <input type="Button"Value="Enquiry"onclick="SearchSite ()"/> <table style="Border-collapse:collapse;"Border=1;> <thead> <th> <input type="checkbox"Id="Checkall"onclick="Checkall ()"/> </th> <th> serial number </th> <th> website name </th> <th> aliases </th> <th> URLs </th> </thead> <tbody id="tbody"> </tbody> </table>

/*Register*/function Addsite () {varwangzhanming = document.getElementById ("wangzhanming"). Value; varbieming = document.getElementById ("bieming"). Value; varWangzhi = document.getElementById ("Wangzhi"). Value; varsite ={wangzhanming:wangzhanming, bieming:bieming, Wangzhi:wangzhi}if(Localstorage.sites = =undefined) {        vararr = []; }Else{        varstr =localstorage.sites; vararr =json.parse (str); }     for(varI=0; i<arr.length; i++){        if(Arr[i].wangzhanming = =wangzhanming) {Alert ("site name is registered! Please change the website name! ");return;    }} arr.push (site); varstr =json.stringify (arr); Localstorage.sites=str; Alert ("New Success!! "); Showallsite ();}/** * Show list of all websites*/function Showallsite () {if(localstorage.sites = = undefined)return; varstr =localstorage.sites; vararr =json.parse (str); varHTML =""; Arr.foreach (function (item,index) {HTML+="<tr class= ' tr ' onclick= ' Chooseinput ("+index+") ' ondblclick= ' Updatesite ("+item.index+") ' ><td align= ' center ' ><input type= ' checkbox ' value= '"+index+"' class= ' checkbox '/></td><td>"+ (index+1)+"</td><td>"+item.wangzhanming+"</td><td>"+item.bieming+"</td><td>"+item.wangzhi+"</td></tr>";        }); varTbody = document.getElementById ("tbody"); Tbody.innerhtml=html;} Window.onload=function () {showallsite ();}/*Delete a selected site*/function Delsite () {varCheckboxs =document.getelementsbyclassname ("checkbox"); varCount=0; varstr =localstorage.sites; vararr =json.parse (str);  for(varI=0; i<checkboxs.length;i++){    if(Checkboxs[i].checked){                        varIndex =parseint (checkboxs[i].value)-count; Arr.splice (Index,1); Count++; }} localstorage.sites=json.stringify (arr); if(count==0) {alert ("Please select at least one item!! ")    }Else{alert ("Delete Success! Altogether deleted"+count+"Piece of data! ");    Showallsite (); }    }

HTML5 New Web Storage method