HTML5 Local Storage Localstorage

HTML5 Local storage is the trend, if only in memory, it is sessionstorage, their syntax is the same, just one stored in the local file system, and the other is stored in memory (as the browser closes and disappears), its statements are as follows:

Localstorage.setitem (' A ', ' xxxxxx ');  // set localstorage.getitem (' a ');  // Get // Delete

Here are the characteristics of localstorage and sessionstorage.

1. Storage format

Only objects of the string type are stored (although other primitive types of objects can be stored in the specification, so far no browser has implemented them).

2. Life cycle

In the timeliness of data storage, Localstorage does not set a time limit for data survival as a cookie. In other words, as long as the user does not actively delete, the data stored by Localstorage will be permanently present.

3. Storage location

Of course, the storage of localstorage data is present in the local file system, for example, for Chrome, where the localstorage data is stored in: c:\users\{username}\appdata\local\ Google\chrome\user data\default\local in storage. For the other 4 big browsers, you can look for them on your own.

4. Data sharing

The information in Localstorage or sessionstorage cannot be shared by different browsers. The same localstorage can be shared between different pages in the same browser (the page belongs to the same domain name and port), but sessionstorage information cannot be shared between pages or tabs. It is important to note that pages and tabs refer only to top-level windows, and if a tab contains multiple IFRAME tags and they belong to the same-origin page, they can be shared sessionstorage.

5. Compatibility

You can see that in addition to IE, other browsers are very early version of the support, for IE low-version series of browsers, we need a compatible solution to deal with.

After IE5.0, Microsoft has customized the concept of a persistent user data UserData, which is only supported by IE browser. Let's look at how it operates--

(function(Win) {//for IE, browsers that do not support localstorage    //that is, for IE6/7    if(typeofWin.attachevent! = "undefined" &&typeofWin.localstorage = = "undefined") {        varLocalFilename = "_simulatelocalstorage", Expires= 365, FormField=NULL; //set valid for 365 days        varexpire =NewDate (); Expire.setdate (Expires+expire.getdate ()); FormField= document.createelement ("Input"); Formfield.type= "hidden"; Formfield.addbehavior (' #default #userdata ');            Document.body.appendChild (FormField); varStorage ={setitem:function(key, value) {formfield.load (localfilename);                Formfield.setattribute (key, value);            Formfield.save (LocalFilename); }, GetItem:function(key) {formfield.load (localfilename); returnFormfield.getattribute (key); }, RemoveItem:function(key) {formfield.load (localfilename);                Formfield.removeattribute (key);            Formfield.save (LocalFilename); }, clear:function() {formfield.load (localfilename); varD =NewDate (); D.setdate (D.getdate ()-1); Formfield.expires=d.toutcstring ();            Formfield.save (LocalFilename);            }        }; win["Localstorage"] =storage; }) (window);

Here is just a simple package for IE compatibility, the link below gives a very complete solution for localstorage compatibility.

Https://github.com/machao/localStorage

6. Storage size

For HTML5 Localstorage, the size support is 5M (of course, the size of each browser is different). For IE's UserData, the maximum number of user data per domain is 64KB.

7. Application Scenario

It is not recommended to use Localstorage to store sensitive information, even if the information is encrypted. In addition, using Localstorage for authentication data is less mature. We know that it is usually possible to obtain a cookie through an XSS vulnerability, and then use this cookie to authenticate the login, but the browser can protect the cookie from XSS attacks through HttpOnly. Localstorage storage does not have any defense against XSS attacks, and once an XSS vulnerability occurs, the data stored in Localstorage is easily accessible.

Reference:

1> "The secret of Web front-end hacker technology"

2> github-machao-localstorage

3> HTML5 localstorage Local Storage

4> localstorage and Sessionstorage usage Summary

Transfer from http://www.cnblogs.com/jinguangguo/p/4083919.html

HTML5 Local Storage Localstorage