HTML5 local storage localStorage, sessionStorage basic usage, traversal operations, exception handling, etc._html5 tutorial skills

The usage methods of localStorage and sessionStorage in the local storage API of HTML5 are the same. The difference is that sessionStorage is cleared after closing the page, while localStorage will always be saved. Here we take localStorage as an example to briefly introduce the local storage of HTML5 and provide some examples for common problems such as traversal. localStorage is the HTML5 local storage API, which uses key-value pairs to access data. The accessed data can only be strings. Different browsers have different support for this API, such as usage methods, maximum storage space, etc.

1. Basic usage of localStorage API

The usage of localStorage API is simple and easy to understand. The following are common API operations and examples: Set 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() Get the number of local storage data ：localStorage.length Get the key value of the Nth data: localStorage.key(N)

2. Traverse key key value method

Copy code

The code is as follows :

for(var i=localStorage.length - 1; i >=0; i--){
console.log('(i 1) 'th data The key value is: ' localStorage.key(i) ', 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 limitations 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 request for more space will pop up)

Test code reference:

Copy code

The code is as follows:

<script><br> function log( msg ) {<br> console.log(msg);<br> alert(msg);<br> }&lt ;/p> <p> var limit;<br> var half = '1'; //This will be changed to Chinese and run again<br> var str = half;<br> var sstr;<br> while ( 1 ) {<br> try {<br> localStorage.clear();<br> str = half;<br> localStorage.setItem( 'cache', str );<br> half = str;<br> } catch ( ex ) { <br> break;<br> }<br> }<br> var base = str.length;<br> var off = base / 2;<br> var isLeft = 1;<br> while ( off ) {<br> if ( isLeft ) {<br> end = base - (off / 2);<br> } else {<br> end = base (off / 2);<br> }</p> <p> sstr = str.slice( 0, end );<br> localStorage.clear();<br> try {<br> localStorage.setItem( 'cache', sstr );<br> limit = sstr. length;<br> isLeft = 0;<br> } catch ( e ) {<br> isLeft = 1;<br> }</p> <p> base = end;<br> off = Math.floor( off / 2 );<br> }</p> <p> log( 'limit: ' limit );<br></script>

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('Local storage limit exceeded!');
// If the historical information is no longer important, you can clear it and then set it again
localStorage.clear();
localStorage.setItem(key, value);
}
}