Comment: This article mainly introduces the basic usage of localStorage, sessionStorage, traversal operations, exception handling, etc. for HTML5 local storage. Friends who need it can refer to it.
The localStorage in HTML5's local storage API is the same as sessionStorage, the difference is that sessionStorage is cleared after closing the page, while localStorage will be saved all the time. Let’s take localStorage as an example here to briefly introduce the local storage of HTML5 and give some examples for common problems such as traversal. localStorage is an HTML5 locally stored API. It uses key-value pairs to access data, and the accessed data can only be a string. Different browsers have different support for this API, such as usage method, maximum storage space, etc.
1. Basic usage methods of localStorage API
The localStorage API is easy to understand. The following are common API operations and examples: Set 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:
localStorage.getItem(i);
}
Delete data: localStorage.removeItem(key) Example:
localStorage.removeItem(i);
}
Clear all data: localStorage.clear() Get the number of local stored data: localStorage.length Get the key value of the Nth data: localStorage.key(N)
2. Iterate over 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) +', and the data is:' + localStorage.getItem(localStorage.key(i)));
}
3. Storage size limit testing 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:
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 it, a dialog box that allows requests for more space will pop up)
Test code reference:
<!DOCTYPE html>
<html>
<head>
<script>
function log( msg ) {
console.log(msg);
alert(msg);
}</p><p> var limit;
var half = '1'; //This will be changed to Chinese and run again
var str = half;
var strtr;
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', str );
limit = strtr.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
try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('Local storage limit exceeded!');
//If the historical information is not important, you can clear it and then set it
localStorage.clear();
localStorage.setItem(key,value);
}
}