Examples of localstorage local storage in HTML5

In HTML5, local storage is the property of a window, including Localstorage and Sessionstorage, from which the name should clearly identify the difference between the two, which is always local, and the latter is only accompanied by a session, and the window closes once it is closed. The use of the two is exactly the same, taking Localstorage as an example.

if (window.localstorage) {
Alert (' This browser supports Localstorage ');
}else{
Alert (' This browser does not support Localstorage ');
}

Localstorage Local Storage Basic usage

How to create and access Localstorage

<script type= "Text/javascript" >
Localstorage.lastname= "Smith";
document.write (Localstorage.lastname);
</script>

A localstorage is created on the top.

We will do a refresh page, increase the number of visits to the function! Quite simply, the code is as follows:

<script type= "Text/javascript" >
if (Localstorage.pagecount)
{
Localstorage.pagecount=number (Localstorage.pagecount) +1;
}
Else
{
Localstorage.pagecount=1;
}
document.write ("Visits" + Localstorage.pagecount + "time (s)");
</script>

The above is a point of operation, Localstorage also has a storage API, specifically as follows:

Call the SetItem () method, pass the corresponding name and value, can realize the data store

Call the GetItem () method and pass the name out to get the corresponding value

Call the RemoveItem () method, the name as a parameter, you can delete the corresponding data

Call the Clear () method to delete all stored data

Use the Length property and the key () method to pass in the 0~length-1 number to enumerate the names of all stored data

Usage is as follows:

Localstorage.setitem ("name", "Haorooms"); Store a string name as "name"
Localstorage.getitem ("name"); Get the value of ' name '

Enumerates all stored name/value pairs
for (var i=0; i<localstorage.length; i++) {//length represents the total number of all name value pairs
var name = Localstorage.key (i); Get the name of the first pair
var value = Localstorage.getitem (name); Gets the value of the pair
}

Localstorage.removeitem ("name"); Delete the "name" item
Localastorage.clear (); Delete all
The difference between Sessionstorage and localstorage

The difference between sessionstorage usage and localstorage usage is that Sessionstorage is a session store that closes the browser and clears the stored content.

Low version browser storage compatibility scheme

IE User Data

Microsoft has implemented its proprietary client-side storage mechanism, "UserData", in IE5 and later IE browsers.

UserData can implement a certain amount of string data storage and can be used as an alternative to Web storage for IE8 previous IE browsers.

Ilocalstorage Plugin

Because the local storage APIs for the following browsers are not the same, a plugin is written to IE8 the major browser stores. The methods and usage provided are as follows:

GetItem: Getting Properties
SetItem: Setting properties
RemoveItem: Deleting properties

Ilocalstorage.setitem (' key ', ' value ');
Console.log (Ilocalstorage.getitem (' key '));
Ilocalstorage.removeitem (' key ');
Plug-in code

/**
* Localstorage Local Storage compatible functions
* GetItem: Getting properties
* SetItem: Setting properties
* RemoveItem: Deleting attributes
*
*
* @example
*
Ilocalstorage.setitem (' key ', ' value ');
Console.log (Ilocalstorage.getitem (' key '));
Ilocalstorage.removeitem (' key ');
*
*/

(Function (window, document) {

1. UserData objects under the IE7
var UserData = {
Userdata:null,
Name:location.href,
Init:function () {
Initialization under IE7
if (! Userdata.userdata) {
try{
Userdata.userdata = document.createelement ("INPUT");
UserData.userData.type = "hidden";
UserData.userData.style.display = "None";
UserData.userData.addBehavior ("#default #userdata");
Document.body.appendChild (Userdata.userdata);
var expires = new Date ();
Expires.setdate (expires.getdate () + 365);
UserData.userData.expires = Expires.toutcstring ();
catch (e) {
return false;
}
}
return true;
},

        setitem:function (key, value) {
             if (Userdata.init ()) {
                 UserData.userData.load (userdata.name);
                UserData.userData.setAttribute (key, value);
                UserData.userData.save (Userdata.name);
           }
       },

        getitem:function (key) {
             if (Userdata.init ()) {
                 UserData.userData.load (userdata.name);
                return UserData.userData.getAttribute (key);
           }
       },

Removeitem:function (key) {
if (Userdata.init ()) {
UserData.userData.load (Userdata.name);
UserData.userData.removeAttribute (key);
UserData.userData.save (Userdata.name);
}
}

};

2. Compatible browsers that support only Globalstorage
Use: var storage = getlocalstorage ();
function Getlocalstorage () {
if (typeof localstorage = = "Object") {
return localstorage;
else if (typeof globalstorage = = "Object") {
return GLOBALSTORAGE[LOCATION.HREF];
else if (typeof UserData = = "Object") {
return GLOBALSTORAGE[LOCATION.HREF];
} else{
throw new Error ("Do not support local storage");
}
}
var storage = Getlocalstorage ();

function Ilocalstorage () {

}

Localstorage Object for advanced browsers
Ilocalstorage.prototype = {
Setitem:function (key, value) {
if (!window.localstorage) {
Userdata.setitem (key, value);
}else{
Storage.setitem (key, value);
}
},

        getitem:function (key) {
             if (!window.localstorage) {
                 return Userdata.getitem (key);
           }else{
                 return Storage.getitem (key);
           }
       },

Removeitem:function (key) {
if (!window.localstorage) {
Userdata.removeitem (key);
}else{
Storage.removeitem (key);
}
}
}

if (typeof module = = ' object ') {
Module.exports = new Ilocalstorage ();
}else {
Window.ilocalstorage = new Ilocalstorage ();
}

}) (window, document);

These are examples of local storage of user action behavior.

The test found that the current browser is not very good support for this, only the ipad and Firefox support, and Firefox support is messy, E object does not have those attributes. ipad support is very good, with the E.uri (not e.url), the desktop of Safari is not, strange, the more later the browser version will probably support better.