HTML5 Local storage localstorage, Sessionstorage and IE exclusive UserData

The most common way to store data on the client is non-cookie, and with the popularity of HTML5, new local storage methods Localstorage and Sessionstorage will be available on standard browsers. Localstorage and Sessionstorage is one of the new features of HTML5, said the new features, in fact, Microsoft has already supported Localstorage and Sessionstorage two APIs in IE8, but in IE8, 9 When testing these two APIs, be sure to test in a server environment, the local environment will be error.

What is Localstorage?

Localstorage is used for persistent local storage, and data will never expire unless data is manually deleted.

B. What are the advantages compared to cookie,localstorage?

As shown in the table below, ROM lists the characteristics of cookies and localstorage

Characteristics	Localstorage	Cookies
Capacity size	5M	Around 4k
Compatibility	IE8 and above browsers	Basically all browsers are compatible
Expiry time	Never expire	can be customized
is sent to the server with HTTP	Whether	Yes (bandwidth occupied)
Scope	Sub-domains are independent of each other	You can set the primary domain share through. setdomain

The advantages of localstorage are obvious, the capacity is large, does not occupy the bandwidth, besides, Localstorage provides the rich method to set up, read and remove data.
Localstorage.setitem (Key,value)//Set key-value pairs
Localstorage.getitem (key)//read the corresponding value by key value
Localstorage.removeitem (key)//remove the corresponding value by key value
Localstorage.clear ()//Initialize Localstorage, clear all key-value pairs
Localstorage.key (index)//To get the key name of the specified index by subscript index

Sessionstorage is similar to localstorage, what difference does it have between them? The only difference is that they keep the data persistent above, Localstorage saved data will never expire, Sessionstorage saved data disappears after the browser window closes, do not close the browser window only refresh the page, The data saved by Sessionstorage is still there. They have the same properties and methods.

Although Sessionstorage and localstorage so easy to use, but IE6, IE7 above does not support, we can through IE exclusive userdata to compensate for this flaw, UserData is the early Internet Explorer used to store data locally, UserData data is stored as a file on disk, UserData need to be attached to an HTML tag to set up, read, remove data, not all HTML tags can, supported HTML tags are:

A, ABBR, acronym, ADDRESS, Area, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, HN, HR, I, IMG, input Type=button, input type=checkbox, input type=file, input type=hidden, input Type=ima GE, input Type=password, input type=radio, input type=reset, input type=submit, input type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, plaintext, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, Strong, SUB, SUP, tabl E, TEXTAREA, TT, U, UL, VAR, XMP.

UserData also has certain limits on the size of the data (translated from the MSDN documentation, English-language proficiency is recommended in English documents):

Site Type	Single File size limit (KB)	Data size limit for a single domain name (KB)
Local Machine	128	1024
Lan	512	10240
Trusted Sites	128	1024
Internet	128	1024
Restricted Sites	64	640

As can be seen from the table above, to be compatible with a variety of situations, it is recommended that a single userdata file size not more than 64KB.

Using UserData to store data is a bit trickier than localstorage, but it's still simple, and the process is divided into the following steps:

1. Create HTML tags

2, add the HTML tag style behavior:url (' #default #userdata ') or JS to the HTML object settings. Addbehavior ("#default #userdata")

3. Set data Expiration time

4. Loading UserData

5. Storing data/reading data/deleting data

6. Save data to storage area

See Code easier to understand ( special note : The following code is called inside the body tag, in the head tag script inside the call prompt does not have permission, the reason is unknown):

<script type= "Text/javascript" > var UserData = {userdata:null, name:document.location.hostname, Init:function () {if (!this.userdata) {try {this.userdata = Documen                    T.createelement ("INPUT");                    This.userData.type = "hidden";                    This.userData.style.display = "None";                    This.userData.addBehavior ("#default #userdata");                    Document.body.appendChild (This.userdata);                    var expires = new Date ();                    Expires.setdate (expires.getdate () + 365);                This.userData.expires = Expires.toutcstring ();                } catch (e) {return false;        }} return true;                }, Setitem:function (key, value) {if (This.init ()) {this.userData.load (this.name);                This.userData.setAttribute (key, value); This.userdatA.save (this.name);                }}, Getitem:function (key) {if (This.init ()) {this.userData.load (this.name); return This.userData.getAttribute (Key)}}, Remove:function (key) {if (                This.init ()) {this.userData.load (this.name);                This.userData.removeAttribute (key);            This.userData.save (this.name); }}};</script>

Summary: In the case of IE6, IE7 market share gradually decline, localstorage and sessionstorage will be applied more and more widely, the cookie in addition to some necessary circumstances, can be replaced by localstorage, of course, It is not recommended to store sensitive data in Localstorage because Localstorage can read changes or deletions at any time.

Reference Document: http://www.css88.com/archives/3717

By: Wang Meijian from:http://www.cnblogs.com/wangmeijian/p/4518606.html Reprint please retain the attribution and provenance!

HTML5 Local storage localstorage, Sessionstorage and IE exclusive UserData