序文
フロントエンド開発プロセスでは、データ キャッシュ処理も非常に重要な操作です。データのキャッシュは多くのビジネス ニーズを解決でき、データ キャッシュ操作は実際の開発プロセスで広く使用されています。キャッシュを必要とする一般的に使用される操作は遍在しており、ローカル ストレージデータの量も非常に一般的な要件であり、それを実装する方法は数多くあります。Cookie はフロントエンド開発者にとってよく知られたものですが、Cookie の欠点は明らかです。読み書きが難しく、容量が限られています。主な機能は、Cookie の主な機能です。 localStorage は Cookie を置き換えるために使用します。この記事では、ローカル ストレージの便利な方法である localStorageの使用方法を紹介します。
ローカルストレージの定義
localStorage は永続化のためのローカル ストレージであり、データが積極的に削除されない限り、データが期限切れになることはありません。localStorage の機能は HTML5 で新たに追加されました. 主にローカル ストレージとして使用され、Cookie の欠点を解決し、Cookie を置き換えるために使用されます. 一般的なブラウザは localStorage で 5M サイズをサポートしますが、ブラウザによって localStorage がサポートするサイズは異なる場合があります。
localStorage メソッド
localStorageは主に 3 つのメソッドで構成されており、簡単に言うと以下のような保存、取得、削除の 3 つの操作に対応した利用方法です。
1.保存
localStorage.setItem(key, value): キーフィールドに値を格納し、キーが存在する場合は値を更新します。
2.テイク
localStorage.getItem(key): 指定されたキーを使用してローカルに保存された値を取得し、キーが存在しない場合は null を返します。
3. 削除
削除は、対応するキーの方向に従って削除する方法と、直接全削除する方法の2つの削除方法に対応しています。
①キー指定に従って削除
localStorage.removeItem(key): 指定されたキーでローカルに保存されている値を削除します。削除すると、そのキーに対応するすべてのデータが削除されます。
②全て削除
localStorage.clear(): この操作は複数のキャッシュ データを削除するのに適していますが、実行されると、ローカル キャッシュ データはすべてクリアされます。
4. その他の方法
①保存されたキーを走査する
localStorage.length: データの総数。例: localStorage.length
②鍵を入手する
localStorage.key(index): 対応するキーを取得します。例: let key = localStorage.key(index);
③JSON形式でデータを保存
JSON.stringify(data) は、オブジェクトを JSON 形式の文字列に変換し、変換された文字列を返します。
JSON.parse(data) はデータをオブジェクトに解析し、解析されたオブジェクトを返します。
ただし、localStorage に保存されたデータはブラウザ間で共有できないことを考慮して、現在のブラウザのデータのみを読み取ることができ、ストレージ容量は 5M です。
ローカルストレージ機能
localStorage には、次のような利点と欠点の両方があります。
-
localStorage はcookie の機能を拡張して置き換えるもので、localStorage は通常のオブジェクトであり、任意のオブジェクト操作を適用できます。
-
localStorage は、初めてリクエストされたデータをローカルに直接保存でき、ブラウザは 5M のサイズをサポートします。
-
ブラウザは、 IE8以降のIEバージョンでのみlocalStorageをサポートします。
-
現在、localStorageの値の型は文字列型のみに制限されているため、一般的なJSONオブジェクト型を使用する場合は変換する必要があります。
-
localStorage はブラウザのプライバシー モードでは読み取ることができません。
-
クローラーはlocalStorageをクロールできません。
-
localStorage は永続ストレージに属します。
-
LocalStorage はドメイン名アクセスを通じてのみ機能するため、clear() メソッドが呼び出される場合、key、oldValue、newValue はすべて null に設定されます。
-
localStorage も同様に使用され、localStorage には時間制限のあるデータ ストレージがありません。
localStorage の用途
理解しやすく使用しやすいように、localStorageの使用例を共有しましょう。
1. localStorageを使用する場合は、まずlocalStorage が使用できるかどうかを判断する必要があるため、次に示すように、ブラウザがlocalStorage をサポートしているかどうかを判断する必要があります。
if(!window.localStorage){alert("ブラウザはローカルストレージをサポートしていません!"); return false; }else{ //ビジネス要件 }
2. localStorageを操作するためのJavaScriptの定期的な使用
①localStorage_の設定
Storage.set = function(name, val) { localStorage.setItem(name, val); }
②ローカルストレージを取得する
Storage.get = function(name) { return localStorage.getItem(name); }
③呼び出し関数
Storage.set("ヒント", "はい"); Storage.set("サイト", "..."); console.log(Storage.get("ヒント")); //输出結果：はい
④完成例
<html>
<head>
<title>本地に存在します</title>
</head>
<body>
<script>
const Storage = {};
Storage.get = function(name) {
return localStorage.getItem(name);
Storage.set = function(name ,
val) {
localStorage.setItem(name, val);
Storage.set
("ヒント", "はい");
Storage.set("サイト", "...");
console.log(Storage.get("ヒント")); //输出结結果：はい
</script>
</body>
</html>
3. localStorage のキーと値のペアの例を取得します。
for(var i=0;i<localStorage.length;i++){ console.log( localStorage.getItem(localStorage.key(i))); // localStorage に保存されている結果を出力します }
4. localStorageの削除例
① localStorageの内容を全てクリアする
var storage=window.localStorage; storage.clear(); コンソール.ログ(ストレージ);
② localStorage 内のキーと値のペアを削除します。
var storage=window.localStorage; ストレージ.a=1; storage.setItem("b",111); storage.removeItem("a"); コンソール.ログ(ストレージ.a);
5. localStorageを使用してJSONオブジェクトを保存する
localStorageを使用してJSONオブジェクトを保存するには、まず、保存するJSONオブジェクトを文字列に変換し、次にlocalStorageを介して保存し、最後に、JSONオブジェクトを使用する必要がある場所で、 localStorageに保存されている文字列をJSONオブジェクトに分解する必要があります。. 具体的な操作手順は以下の通りです。
①JSONオブジェクトを文字列に変換してlocalStorageに保存する
localStorage.setItem("dataKey", JSON.stringify(this.data)); //this.data は JSON オブジェクトです
②使用する場合は、アクセスした文字列をJSONオブジェクトに変換する
方法 1: JSON.parse(localStorage.getItem("dataKey"); 方法 2: val("("+localStorage.getItem("dataKey")+")");
6. localStorageキー取得例
// key() メソッドを使用して、それにインデックスを挿入して、対応するキーを取得します var storage=window.localStorage; storage.a=1; storage.setItem("b",111); for(var i=0; i <storage.length;i++){ var key=storage.key(i); console.log(key); }