HTML5 Local Storage

Before HTML5, we often use cookies, can record data information, cookies are generated by the server side, sent to user-agent (generally browser), the browser will save the cookie key/value to a text file in a directory, The next time you request the same Web site, the cookie is sent to the server (provided the browser is set to enable cookies). The cookie name and value can be defined by the server side, and can be written directly to Jsessionid for JSP, so that the server can know whether the user is a legitimate user and whether it needs to log on again, and the server can set or read the information contained in the cookie. This maintains the state of the user and the server session.

Using the jquery cookie plugin, we can easily store, read and delete cookies in just a few lines of code. See the implementation code for using jquery to manipulate cookies. Through cookies, we can record the user's login status and other information we need to record, so that when the user logs in again we can use cookies to generate the corresponding information, such as the number of visits, we can also use cookies to judge, Blocking certain actions when a cookie is present (it is not safe to rely solely on cookies).

Today, we focus on documenting the local caching mechanism of HTML5, and what are the differences between cookies?

1. Almost all browsers support cookies, while local storage (hereinafter referred to as Localstorage) is ie8+, firefox3.0+, opera10.5+, chrome4.0+, safari4.0+, iphone2.0+, Supported by andrioid2.0+ and other platforms.

The 2.cookie maximum support capacity is 4KB, while the Localstorage maximum support capacity is 5M.

3. Unlike cookies, Localstorage's data will not be sent to the server every time the HTTP request is made (you can, of course, do it yourself if you need to).

Simply put, HTML5 local storage is a way for Web pages to store key-value pairs in the user's browser client. Like cookies, this data does not disappear because you open a new website, refresh the page, or even close your browser. Divided into Localstorage and sessionstorage, their usage is consistent. The difference is that their time limit is different. There is no time limit for localstorage. Sessionstorage This session-based data store, the data will be deleted after closing or leaving the site. One thing that seems inconvenient to me is that localstorage cannot customize the expiration time as a cookie does, and if it takes time to judge, it needs to be judged by JS.

Localstorage usage is basically consistent with cookies:

//determine if local storage is supportedif(window.localstorage) { Dosomething}Else{    Do...}//Storing DataLocalstorage.a= ' value 'localstorage[' A ']= ' value 'Localstorage.setitem ("A", "value")//Recommended Use//reading DatavarA = localstorage["a"];varA =Localstorage.a;varA = Localstorage.getitem ("a");//Recommended Use//Clearing key ValuesLocalstorage.removeitem ("C");//If you want to clear all key-value pairs at once, you can use clear (). //The HTML5 also provides a key () method that can be used when there are no known key valuesvarStorage =Window.localstorage;functionShowstorage () { for(vari=0;i<storage.length;i++){  //Key (i) obtains the corresponding key, then uses the GetItem () method to obtain the corresponding valuedocument.write (Storage.key (i) + ":" + storage.getitem (Storage.key (i)) + "<br>"); }}

Of course, with cookies, local storage can also store JSON class data, such as the following code: (demo only, not so rigorous)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Input{width:60%;height:5%}</style>functionSave () {varobj=NewObject (); varName=document.getelementbyid (' name '). Value; Obj.name=document.getelementbyid (' name '). Value; Obj.moible=document.getelementbyid (' Mobile '). Value; Obj.email=document.getelementbyid (' email '). Value; Obj.address=document.getelementbyid (' Address '). Value; if(window.localstorage) {Localstorage.setitem (name,json.stringify (obj)) alert (' Data saved successfully ')    }}functionappend () {varCreat=document.createelement (' div ')    ; varS= "varName=document.getelementbyid (' name '). Value; varData=Json.parse (Localstorage.getitem (name))//alert (data.name)s+= ' <table> ' for(varIinchdata) {s+ = ' <tr><td> ' +i+ ' </td><td> ' +data[i]+ ' </td></tr> '} s+ = ' </table> '//alert (s)Creat.innerhtml=s Document.body.appendChild (creat)}</script><body><form id= ' hhe ' ><input type= "text" id= ' name '/><br/><input type= ' Text "id= ' mobile '/><br/><input type=" text "id= ' email '/><br/><input type=" text "id= ' address ' /><br/><input type= ' button ' value= ' save Data ' onclick= ' Save () '/><input type= ' button ' value= ' Append data ' onclick= ' append () '/></form></body>
Previously used JQ, now want to study the next JS, so, hehe, will see it
When you click Save data, we see a Zhang San JSON data in Localstorage
Then when you enter a name in the first line (usually at this time), we click Append data, we can see the browser cache data can be displayed
HTML5 Local Storage