reactのwebストレージlocalStorage
1668 ワード
Html 5に新たに加わったlocalStorage特性は,主にローカルストレージとして用いられ,クッキーのストレージスペース不足の問題を解決した.クッキーの各クッキーのストレージスペースは4 Kで、localStorageでは一般的にブラウザが5 Mサイズをサポートしており、ブラウザによってlocalStorageが異なります.
利点:クッキーの4 k制限を拡張し、最初に要求されたデータをローカルに直接保存できますが、高バージョンのブラウザでのみサポートされています.
localStorageとsessionStorageの唯一の違いは、localStorageが永続的なストレージに属し、sessionStorageがセッションが終了すると、sessionStorageのキー値ペアが空になります.
1、使用前にブラウザがlocalStorageという属性をサポートしているかどうかを判断する
2、localStorage書き込みの3つの方法(localStorageはstringタイプのストレージのみをサポート)
3、localStorage読み取りの3つの方法
公式推奨getItem/setItemの2つの方法でアクセス
4、localStorage変更
aの値はそのまま変更されました
5、localStorage削除
6、localStorageキー取得
7、注意事項jsonをlocalStorageに保存すると、localStorageは自動的にlocalStorageを文字列形式に変換し、JSONを使用する必要がある.stringify()メソッド、JSONをJSON文字列に変換
読み込み後にJson文字列をjsonオブジェクトに変換するにはJSONを使用する.parse()メソッド
利点:クッキーの4 k制限を拡張し、最初に要求されたデータをローカルに直接保存できますが、高バージョンのブラウザでのみサポートされています.
localStorageとsessionStorageの唯一の違いは、localStorageが永続的なストレージに属し、sessionStorageがセッションが終了すると、sessionStorageのキー値ペアが空になります.
1、使用前にブラウザがlocalStorageという属性をサポートしているかどうかを判断する
if(!window.localStorage){
alert(“ localstorage");
return false;
}else{
//
}
2、localStorage書き込みの3つの方法(localStorageはstringタイプのストレージのみをサポート)
var storage=window.localStorage;
// 1、 a
storage[“a”] = 1;
// 2
storage.a = 1;
// 3
storage.setItem(“a”, 3);
3、localStorage読み取りの3つの方法
// 1
var a = storage.a;
// 2
var a = storage[“a”];
// 3
var a = storage.getItem(“a”);
公式推奨getItem/setItemの2つの方法でアクセス
4、localStorage変更
storage[“a”] = 1;
storage.a=4;
aの値はそのまま変更されました
5、localStorage削除
//
storage.clear();
//
storage.removeItem(“a”);
6、localStorageキー取得
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i
7、注意事項jsonをlocalStorageに保存すると、localStorageは自動的にlocalStorageを文字列形式に変換し、JSONを使用する必要がある.stringify()メソッド、JSONをJSON文字列に変換
読み込み後にJson文字列をjsonオブジェクトに変換するにはJSONを使用する.parse()メソッド