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 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> 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>base = end;<br /> off = Math.floor( off / 2 );<br /> } <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);
}
}