HTML5 Localstorage Local Storage principle detailed

First, it is natural to detect whether the browser supports local storage. In HTML5, the local storage is a window property, including Localstorage and Sessionstorage, from the name should be able to clearly identify the difference between the former is always local, the latter is only accompanied by the session, the window once closed. The use of the two is exactly the same, for example, Localstorage.

if (window.localstorage) {

Alert (' This brower supports Localstorage ');

}else{

Alert (' This brower not supports Localstorage)

}

The way to store data is to add a property directly to Window.localstorage, for example: Window.localstorage.a or window.localstorage["a"]. Its read, write, delete operation method is very simple, is in the way of key-value pairs exist, as follows:

Localstorage.setitem ("A", "Isaac");//Set the value of A to "Isaac"

var a = Localstorage.getitem ("a");//Get the value of a

Localstorage.removeitem ("a");//Clear the value of a

The most recommended natural use is GetItem () and SetItem (), which clears the key value pair using RemoveItem (). If you want to clear all key-value pairs at once, you can use clear (). In addition, HTML5 also provides a key () method that can be used when you do not know what key values are available, as follows:

var storage = Window.localstorage;

function Showstorage () {

for (var i = 0;i<storage.length;i++) {

Key (i) obtains the corresponding key, then uses the GetItem to obtain the corresponding key value

document.write (Storage.key (i) + ":" +storage.getitem (Storage.key (i) + "<br>")

}

}

It is important to note that HTML5 local storage can only store strings, and any format stored will be automatically converted to strings, so when reading, you need to do a type of conversion. This is why parseint must be used in the previous code.

In addition, on the Iphone/ipad sometimes set SetItem () will appear strange quota_exceeded_err error, then generally before SetItem, first RemoveItem () ok.

HTML5 Localstorage Local Storage principle detailed