HTML5 Local Storage localstorage, sessionstorage traversal, storage size limit processing

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.

1. Localstorage API Basic Usage 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--) {console.log (' + (i+1) + ') The key value of the data is: ' + localstorage.key (i) + ', Data: ' + loc Alstorage.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 = 5000000firefox 22.0 > 5242875 + 5 = 5242880chrome  28.0  > 2621435 + 5 = 2621440SA Fari  5.1   > 2621435 + 5 = 2621440opera   12.15 > 5M (out of the box will pop up a dialog that allows more space to be requested)

Test Code Reference:

<! DOCTYPE html>
3.2 Data store exception handling
Try{localstorage.setitem (Key,value);} catch (oexception) {if (Oexception.name = = ' Quotaexceedederror ') {console.log (' exceeds 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 traversal, storage size limit processing