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 handlingTry{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