HTML5 Localstorage Local Storage

Localstorage, like Sessionstorage, are objects that store client-side temporary information, and they can only store objects of a string type.

The localstorage life cycle is permanent, which means that the information will always be present unless the user displays the Localstorage information on the UI provided by the browser .
Sessionstorage life cycle is the current window or tab, once the window or tab is permanently closed, all data stored through sessionstorage is emptied.
PS: Different browsers cannot share information in Localstorage or Sessionstorage. 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 share sessionstorage

in HTML5, local storage is a window property, including Localstorage and Sessionstorage

1. First of all, it is natural to detect whether the browser supports local storage (such as Localstorage).
if (window.localstorage) {
alert (' This browser supports Localstorage ');
}else{
alert (' This browser does not support Localstorage ');
    }

2. Set the value inside the Localstorage
localstorage.name = ' ZS ';//Set name as "Zs"
localstorage["name"] = "ls";//Set name to "LS"
Localstorage.setitem ("name", "WW");//Set name as "WW"

3. Get the value inside the Localstorage
Localstorage.name
localstorage["name"]
Localstorage.getitem ("name")

In addition, HTML5 also provides a key () method
var storage = window.localstorage;
function Showstorage () {
For (Var i=0;i<storage.length;i++) {
//key (i) obtain the corresponding key, and then use the GetItem () method to obtain the corresponding value
document.write (Storage.key (i) + ":" + storage.getitem (Storage.key (i)) + "<br>");
        }
    }

4. Clear the value inside the Localstorage
Localstorage.removeitem ("name")//delete name
localstorage.clear ()//Clear All


5.localStorage Events
HTML5 's local storage also provides a storage event that allows you to listen for changes to key-value pairs, using the following methods
if (window.addeventlistener) {
Window.addeventlistener ("Storage", handlestorage,false);
}else if (window.attachevent) {
window.attachevent ("Onstorage", handlestorage);
    }
function Handlestorage (e) {
if (!e) {e=window.event;}
//showstorage ();
    }

for the event variable E, is a Storageevent object, provides some useful properties, can be very good to observe the change of key value pairs

Property	Type	Description
Key	String	The named key is added, removed, or moddified
OldValue	Any	The previous value (now overwritten), or null if a new item is added
NewValue	Any	The new value, or null if an item is added
Url/uri	String	The page that called the method, the triggered this change

In addition, currently JavaScript uses a very rich JSON format, and if you want to store it locally, you can call Json.stringify () to convert it directly to a string. After reading, call Json.parse () to convert the string to JSON format.

var details = {author: "xxx", "description": "XXX"};
Storage.setitem ("Details", json.stringify (Details));
Details = Json.parse (Storage.getitem ("Details"));

Package Localstorage

var LS = {
Set:function (key, value) {
Strange Quota_exceeded_err errors sometimes occur when setting SetItem () on Iphone/ipad
At this time generally before SetItem, first RemoveItem () ok
if (This.get (key)!== null)
This.remove (key);
Localstorage.setitem (key, value);
},
When querying a nonexistent key, some browsers return undefined, where the uniform return null
Get:function (key) {
var v = localstorage.getitem (key);
return v = = = undefined? Null:v;
},
Remove:function (key) {Localstorage.removeitem (key);},
Clear:function () {localstorage.clear ();},
Each:function (FN) {
var n = localstorage.length, i = 0, fn = fn | | function () {}, key;
for (; i<n; i++) {
Key = Localstorage.key (i);
if (Fn.call (this, key, This.get (key)) = = = False)
Break
If the content is deleted, the total length and index are reduced synchronously
if (Localstorage.length < n) {
N--;
I--;
}
}
}
}

HTML5 Localstorage Local Storage