HTML5 local storage, basic usage of localstorage and sessionstorage, traversal operation, exception handling, etc

Time:2022-5-5

The usage of localstorage in HTML5’s local storage API is the same as that of sessionstorage. The difference is that sessionstorage is cleared after closing the page, while localstorage is always saved. Let’s take localstorage as an example to briefly introduce the local storage of HTML5, and give some examples for common problems such as traversal. Localstorage is an API for HTML5 local storage. It uses key value pairs to access data. The accessed data can only be strings. Different browsers support this API differently, such as usage method, maximum storage space, etc.

1、 Basic usage of localstorage API

The usage of localstorage API is easy to understand. The following are common API operations and examples: setting data: localstorage setItem(key,value); Example:

Copy code

The code is as follows:

for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}

Get data: localstorage Getitem (key) get all data: localstorage Valueof() example:

Copy code

The code is as follows:

for(var i=0; i<10; i++){
localStorage.getItem(i);
}

Delete data: localstorage Removeitem (key) example:

Copy code

The code is as follows:

for(var i=0; i<5; i++){
localStorage.removeItem(i);
}

Clear all data: localstorage Clear() gets the number of local storage data: localstorage Length gets the key value of the nth data: localstorage key(N)

2. Method of traversing key value

Copy code

The code is as follows:

for(var i=localStorage.length – 1 ; i >=0; i–){
console. The key value of log (‘th ‘+ (I + 1) +’ data 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

Different browsers basically have restrictions on the local storage size of HTML5. The results of a test are as follows:

Copy code

The code is 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 (if it exceeds, a dialog box allowing more space will pop up)

Test code reference:

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<script>
function log( msg ) {
console.log(msg);
alert(msg);
}</p>
<p> var limit;
var half = ‘1’; // I’ll change it to 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);
}</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>
</html>

3.2 data storage exception handling

Copy code

The code is as follows:

try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name == ‘QuotaExceededError’){
console. Log (‘exceeded local storage quota! ‘);
//If the historical information is not important, it can be cleared before setting
localStorage.clear();
localStorage.setItem(key,value);
}
}