HTML5 Local storage localstorage, Sessionstorage basic usage, traversal operations, exception handling, etc.

The localstorage in the HTML5 local storage API is the same as sessionstorage in the usage method, except that Sessionstorage is emptied after the page is closed, and Localstorage is saved. Here we take localstorage as an example, briefly introduce the local storage of the next HTML5, and give some sample explanations for common problems such as traversal. Localstorage is the HTML5 locally stored API that accesses data using key-value pairs, and only the data that is accessed is a string. Different browsers differ on the API support, such as how to use it, maximum storage space, and so on.

First, Localstorage API Basic use method

Localstorage API usage is simple and easy to understand, the following are common API operations and examples: Setting data: Localstorage.setitem (Key,value); Example:

for (var i=0; i<10; i++) {
Localstorage.setitem (I,i);
}

Get Data: Localstorage.getitem (key) Get all data: localstorage.valueof () Example:

for (var i=0; i<10; i++) {
Localstorage.getitem (i);
}

Delete data: Localstorage.removeitem (key) Example:

for (var i=0; i<5; i++) {
Localstorage.removeitem (i);
}

Erase All data: Localstorage.clear () gets the number of locally stored data: Localstorage.length Gets the key value of the nth data: Localstorage.key (n)

2. Traversal key Key value method

for (var i=localstorage.length-1; I >=0; i--) {
The key values for Console.log (' + (i+1) + ' data are: ' + localstorage.key (i) + ', data: ' + localstorage.getitem (Localstorage.key (i)));
}

3. Storage size limit test and exception handling

3.1 Data storage size limit test

Different browsers have a basic limit on the local storage size of HTML5, and one test results in the following:

IE 9 > 4999995 + 5 = 5000000
Firefox 22.0 > 5242875 + 5 = 5242880
Chrome 28.0 > 2621435 + 5 = 2621440
Safari 5.1 > 2621435 + 5 = 2621440
Opera 12.15 > 5M (out of the box will pop up a dialog that allows more space to be requested)

Test Code Reference:

<! DOCTYPE html>
<script>
function log (msg) {
Console.log (msg);
Alert (msg);
}</p> <p> var limit;
var half = ' 1 '; This will change to Chinese and run again.
var str = half;
var sstr;
while (1) {
try {
Localstorage.clear ();
str + = half;
Localstorage.setitem (' cache ', str);
half = str;
} catch (ex) {
Break
}
}
var base = Str.length;
var off = BASE/2;
var isleft = 1;
while (off) {
if (isleft) {
End = base-(OFF/2);
} else {
End = base + (OFF/2);
}</p> <p> sstr = str.slice (0, end);
Localstorage.clear ();
try {
Localstorage.setitem (' cache ', sstr);
Limit = Sstr.length;
Isleft = 0;
} catch (e) {
Isleft = 1;
}</p> <p> base = end;
Off = Math.floor (OFF/2);
}</p> <p> log (' limit: ' + limit);
</script>

3.2 Data store exception handling

try{
Localstorage.setitem (Key,value);
}catch (oexception) {
if (Oexception.name = = ' Quotaexceedederror ') {
Console.log (' exceeded local storage limit! ‘);
If the historical information is not important, it can be emptied and then set
Localstorage.clear ();
Localstorage.setitem (Key,value);
}
}

HTML5 Local storage localstorage, Sessionstorage basic usage, traversal operations, exception handling, etc.