HTML5 Local Storage Localstorage, Sessionstorage use method

What is Localstorage

A few days ago in the old project found that the operation of the cookie is very strange, consulting down is to cache some information to avoid passing parameters on the URL, but did not consider what the cookie will cause problems:

①cookie size is limited to around 4k and is not suitable for business data storage
②cookie each time it is sent along with the HTTP transaction, wasting bandwidth
We do mobile projects, so the technology here that's really good to use is localstorage,localstorage, which can be said to be optimized for cookies, and it's easy to store data on the client and not over HTTP, but not without problems:

①localstorage size is limited to around 5 million characters, each browser is inconsistent
②localstorage is not readable in private mode
③localstorage essence is to read and write files, more data will be compared to the card (Firefox will be a one-time data into memory, think about it is scary AH)
④localstorage can not be crawled by the crawler, do not use it completely replace the URL to pass the argument
Afterward, the above problems can be avoided, so our focus should be on how to use localstorage and how to use it correctly.

The use of Localstorage

Basic knowledge

Localstorage storage objects are divided into two types:

①sessionstrage:session is the meaning of conversation, the session here refers to a user browsing a site, from entering the site to the closure of the site this time period, session object's validity period is only so long.

②localstorage: Storing data on a client hardware device, whatever it is, means that the data is still there the next time you turn on the computer.

The difference between the two is a temporary save, a long term save.

1. Localstorage API Basic Use method

The Localstorage API is straightforward to use, as follows common API actions 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);
}

Empty all data: Localstorage.clear () Gets the number of local storage data: Localstorage.length Gets the key value for nth data: Localstorage.key (n)

2. Traversal key Key value method

for (Var i=localstorage.length-1 i >=0; i--) {
Console.log (' first ' + (i+1) + ' data of the key value is: ' + localstorage.key (i) + ', the data is: ' + localstorage.getitem (Localstorage.key (i)));
}

3. Storage size limit test and exception handling

3.1 Data storage size limit test

The local storage size of HTML5 is limited by different browsers, and the results of one test are as follows:
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 eject the dialog that allows more space to be requested)

Test Code Reference:

<! DOCTYPE html>
<script>
function log (msg) {
Console.log (msg);
Alert (msg);
}

var limit;

var half = ' 1 '; I'll change it in Chinese and run it 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);
}

Sstr = Str.slice (0, end);
Localstorage.clear ();
try {
Localstorage.setitem (' cache ', sstr);
Limit = Sstr.length;
Isleft = 0;
catch (e) {
Isleft = 1;
}

base = end;
Off = Math.floor (OFF/2);
}

Log (' limit: ' + limit);

</script>

3.2 Data Storage exception handling

try{
 localstorage.setitem (key,value);
} catch (oexception) {
 if (oexception.name = = ' Quotaexceedederror ') {
  console.log (' exceeds the local storage limit! ');
  //If historical information is not important, you can clear and then set
  localstorage.clear ();
  localstorage.setitem ( Key,value);
 }
}