コメント:この記事では、主にHTML5ローカルストレージのLocalStorage、SessionStorage、Traversal操作、例外処理などの基本的な使用法を紹介します。それを必要とする友達はそれを参照できます。
HTML5のローカルストレージAPIのLocalStorageはSessionStorageと同じです。違いは、ページを閉じた後にSessionStorageがクリアされ、LocalStorageは常に保存されることです。 HTML5のローカルストレージを簡単に導入し、Traversalなどの一般的な問題の例をいくつか紹介するために、LocalStorageをここで例にしてみましょう。 LocalStorageは、HTML5ローカルに保存されたAPIです。キー価値のペアを使用してデータにアクセスし、アクセスされたデータは文字列にのみ存在できます。さまざまなブラウザは、使用法、最大ストレージスペースなど、このAPIに対して異なるサポートがあります。
1。LocalStorage APIの基本的な使用方法
LocalStorage APIは理解しやすいです。以下は一般的なAPI操作と例です。データの設定:localStorage.setItem(key、value);例:
for(var i = 0; i <10; i ++){
localStorage.setItem(i、i);
}
データの取得:localStorage.getItem(key)すべてのデータを取得:localstorage.valueof()例:
localStorage.getItem(i);
}
データの削除:LocalStorage.RemoveItem(key)例:
localstorage.removeItem(i);
}
すべてのデータをクリアする:localStorage.clear()ローカルストアドデータの数を取得:localstorage.length nthデータのキー値を取得:localstorage.key(n)
2。キーキー値を繰り返します
for(var i = localstorage.length-1; i> = 0; i-){
console.log( '' +(i + 1) + 'データの重要な値は' + localstorage.key(i) + 'です。データは次のとおりです。
}
3。ストレージサイズ制限テストと例外処理
3.1データストレージサイズ制限テスト
さまざまなブラウザは、基本的にHTML5のローカルストレージサイズに制限があります。テストの結果は次のとおりです。
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m(それを超えると、より多くのスペースを要求できるダイアログボックスがポップアップ表示されます)
テストコードリファレンス:
<!doctype html>
<html>
<head>
<スクリプト>
関数ログ(MSG){
console.log(msg);
アラート(MSG);
} </p> <p> var limit;
var half = '1'; //これは中国語に変更され、再び実行されます
var str = half;
var strtr;
while(1){
試す {
localstorage.clear();
str +=半分;
localStorage.setItem( 'cache'、str);
half = str;
} catch(ex){
壊す;
}
}
var base = str.length;
var off = base / 2;
var Isleft = 1;
while(off){
if(isleft){
end = base - (off / 2);
} それ以外 {
end = base +(off / 2);
} </p> <p> sstr = str.slice(0、end);
localstorage.clear();
試す {
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( 'lime:' + lime);
</script>
</html>
3.2データストレージの例外処理
試す{
localStorage.setItem(key、value);
} catch(oexception){
if(oexception.name == 'quotaex hechedederror'){
console.log( 'ローカルストレージ制限を超えた!');
//履歴情報が重要でない場合は、それをクリアしてから設定することができます
localstorage.clear();
localStorage.setItem(key、value);
}
}