Comments: This article mainly introduces the basic usage, traversal operations, and Exception Handling of HTML5 local storage localStorage and sessionStorage. For more information, see
LocalStorage and sessionStorage In the HTML5 local storage API are used in the same way. The difference is that sessionStorage is cleared after the page is closed, while localStorage is always saved. Taking localStorage as an example, we will briefly introduce the local storage of HTML5 and provide 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 have different support for this API, such as usage and maximum storage space.
I. Basic usage of localStorage API
LocalStorage API usage is easy to understand. The following is a common API operation and example: Set Data: localStorage. setItem (key, value); example:
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:
The Code is as follows: for (var I = 0; I <10; I ++ ){
LocalStorage. getItem (I );
}
Data deletion: localStorage. removeItem (key) Example:
The Code is as follows: for (var I = 0; I <5; I ++ ){
LocalStorage. removeItem (I );
}
Clear all data: localStorage. clear () Get local storage data quantity: localStorage. length get the key value of the nth data: localStorage. key (N)
2. key-value Traversal method
The Code is as follows:
For (var I = localStorage. length-1; I> = 0; I --){
Console. the key value of log ('nth '+ (I + 1) +' data is: '+ localStorage. key (I) + ', data:' + localStorage. getItem (localStorage. key (I )));
}
3. storage size limit test and Exception Handling
3.1 data storage size limit test
Different browsers have limits on the size of HTML5 local storage. The results of a test are as follows:
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> 5 MB)
Test code reference:
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'; // you can 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
The Code is as follows:
Try {
LocalStorage. setItem (key, value );
} Catch (oException ){
If (oException. name = 'quotaexceedederror '){
Console. log ('exceeds the local storage quota! ');
// If the historical information is not important, clear it and set it again.
LocalStorage. clear ();
LocalStorage. setItem (key, value );
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
