HTML5 ローカル ストレージ localStorage、sessionStorage の基本的な使用法、トラバーサル操作、例外処理など_html5 チュートリアルのスキル

HTML5のローカルストレージAPIにおけるlocalStorageとsessionStorageの使用方法は同じです。違いは、sessionStorageはページを閉じた後に消去されるのに対し、localStorageは常に保存されることです。ここでは、localStorage を例として、HTML5 のローカル ストレージについて簡単に紹介し、トラバーサルなどの一般的な問題の例をいくつか示します。 localStorage は、キーと値のペアを使用してデータにアクセスする HTML5 ローカル ストレージ API です。アクセスされるデータは文字列のみです。ブラウザーごとに、使用方法、最大ストレージ容量など、この API のサポートが異なります。

1. localStorage API の基本的な使い方

localStorage API の使用法はシンプルで理解しやすいです。一般的な API 操作と例を示します。 データの設定: localStorage.setItem(key,value); 例:

コードをコピーします

コードは次のとおりです:

for(var i=0; i localStorage .setItem(i,i) ;
}

データの取得: localStorage.getItem(key) すべてのデータの取得: localStorage.valueOf() 例:

コードをコピー

コードは次のとおりです:

for(var i=0; i localStorage.getItem( i);
}

データの削除: localStorage.removeItem(key) 例:

コードをコピー

コードは次のとおりです:

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

Clear全データ：localStorage.clear() ローカルストレージのデータ数取得：localStorage.length N番目のデータのキー値取得：localStorage.key(N)

2. トラバースキーキー値メソッド

コードをコピーします

は次のとおりです:

for(var i=localStorage.length - 1; i >=0; i--){
console.log('(i 1) '番目のデータキー値: ' localStorage.key(i) '、データ: ' localStorage.getItem(localStorage.key(i)));
}

3. ストレージ サイズ制限のテストと例外処理

3.1 データストレージサイズ制限テスト

基本的に、さまざまなブラウザーでは HTML5 のローカル ストレージ サイズに制限があります。テストの結果は次のとおりです。

コードをコピー

コードは次のとおりです:

IE 9 > 4999995 5 = 5000000
Firefox 22.0 > 5242875
chrome 28.0 > 5 = 262 1440
サファリ5.1 > 2621435 5 = 2621440
opera 12.15 > 5M (超えると、追加のスペースを要求するダイアログ ボックスが表示されます)

テストコードリファレンス:

コードをコピー

コードは次のとおりです。

<script><br> function log( msg ) {<br> console.log(msg);<br>alert(msg);<br> } <p> var limit;<br> varhalf = '1' //これは中国語に変更されて再実行されます<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> varbase = 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: ' 制限 );<br></script>

3.2 データストレージ例外処理

コードをコピー

コードは次のとおりです:

try{
localStorage .setItem( key, value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('ローカル ストレージの制限を超えました!');
// 履歴情報が重要でなくなった場合は、履歴情報をクリアしてから再度設定できます
localStorage.clear();
localStorage.setItem(key, value);
}
}