localStorageとsessionStorageの概要
序章
The localStorage
と sessionStorage
WebストレージAPIの一部であるオブジェクトは、キーと値のペアをローカルに保存するための2つの優れたツールです。 使用する localStorage
と sessionStorage
ストレージ用はCookieを使用する代わりに使用でき、いくつかの利点があります。
- データはローカルにのみ保存され、サーバーで読み取ることはできません。これにより、Cookieがもたらすセキュリティの問題が解消されます。
- これにより、はるかに多くのデータを保存できます(ほとんどのブラウザーで10MB)。
- 構文は単純です。
最新のすべてのブラウザでもサポートされているため、今日でも問題なく使用できます。 特に認証に関しては、Cookieは依然として有用ですが、使用する場合もあります。 localStorage
また sessionStorage
より良い選択肢かもしれません。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- マシンにインストールされているNodeの最新バージョン。 Nodeをインストールするには、このNode.jsチュートリアルのインストール方法に概説されている手順に従ってください。
- このJavaScriptでコーディングする方法シリーズで見つけることができるJavaScriptでのコーディングの基本的な理解。
ステップ1—理解する localStorage
vs sessionStorage
localStorage
と sessionStorage
ほぼ同一で、同じAPIを使用しています。 違いは sessionStorage
、データはウィンドウまたはタブが閉じられるまでのみ保持されます。 と localStorage
、ユーザーがブラウザのキャッシュを手動でクリアするか、ウェブアプリがデータをクリアするまで、データは保持されます。 このチュートリアルの機能 localStorage
、ただしの構文 sessionStorage
同じです。
この知識があれば、でキーと値のペアを作成、読み取り、更新できます。 localStorage
.
ステップ2—エントリの作成、読み取り、更新
のエントリを作成できます localStorage
を使用してオブジェクト setItem()
方法。 The setItem()
メソッドは2つの引数を取ります。 key
および対応する値:
let key = 'Item 1';
localStorage.setItem(key, 'Value');
エントリを読むには、 getItem()
方法。 The getItem()
メソッドは、キーでなければならない1つの引数を取ります。 この関数は、対応する値を文字列として返します。
let myItem = localStorage.getItem(key);
このコードセット myItem
に等しい 'Value'
、これはに対応する値です key
.
エントリの更新は、 setItem()
方法。 ここでも、2つの引数が必要です。 key引数は既存のキーになり、value引数は新しい値になります。
localStorage.setItem(key, 'New Value');
さて、 localStorage
の値 key
は 'New Value'
それ以外の 'Value'
.
でエントリを作成、読み取り、更新できます localStorage
物体。 個々のエントリを削除して、のすべてのエントリをクリアすることもできます localStorage
.
ステップ3—エントリの削除とクリア
エントリを削除できます removeItem()
方法。 The removeItem()
メソッドは、のキーとなる1つの引数を取ります localStorage
物体:
localStorage.removeItem(key);
ですべてのアイテムをクリアすることもできます localStorage
. これは、 clear()
方法:
に保存されているものをすべてクリアする方法は次のとおりです localStorage
:
localStorage.clear();
これらのメソッドを使用すると、アイテムを削除およびクリアする機能が向上します。 localStorage
早く。 にいくつかの制限があります localStorage
、 けれど。 両方 localStorage
と sessionStorage
文字列のみを保存できます。 これを回避するには、JSONメソッドを使用する必要があります。
ステップ4—文字列以外の値をJSONで保存する
localStorage
文字列値のみを保存できます。 オブジェクトまたは配列を値として格納する場合 localStorage
、使用できます JSON.stringify()
それらを文字列に変換します。 でキーと値のペアを作成または更新する場合 localStorage
、 使用する JSON.stringify()
オブジェクトまたは配列を引数として:
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));
それでも myObj
オブジェクトです、 JSON.stringify(myObj)
それを文字列に変換します。 そう myObj
有効になりました localStorage
価値。
文字列化された値を読み取って返すには、 JSON.parse()
方法。 The JSON.parse()
メソッドはJSON文字列を受け取り、JavaScriptオブジェクトに変換します。 JSON.parse()
かかります .getItem()
それが議論であるように:
let item = JSON.parse(localStorage.getItem(key));
今 item
の値と等しく設定されます key
. 前のコードスニペットでは、 key
の文字列化されたバージョンに設定されました myObj
. 使用する JSON.parse
変換します myObj
オブジェクトに戻ります。 そう item
に等しく設定されます myObj
文字列ではなく、オブジェクトとして。
を使用して配列とオブジェクトを文字列に変換できる JSON.stringify
を使用してそれらを元に戻します JSON.parse
とても便利です。 また、次のことを確認する方法を知る必要があります localStorage
空かどうか。
ステップ5—アイテムの確認
このステップでは、アイテムの存在をテストします。 localStorage
. 使用できます if
確認するステートメント localStorage
アイテムを保持しているか、空の場合。 これを行うには、の長さを確認してください localStorage
:
if (localStorage.length > 0) {
// ...
}
もしも localStorage.length
より大きい 0
、その後、内にアイテムがあります localStorage
物体。 含める else
にアイテムがない場合のステートメント localStorage
:
if (localStorage.length > 0) {
// ...
} else {
// ...
}
適用するコードをに含めることができます if
と else
ステートメント。 のアイテムを繰り返し処理することをお勧めします localStorage
.
ステップ6—アイテムの反復
The localStorage
と sessionStorage
オブジェクトはサポートしていません forEach
方法。 のアイテムを反復処理するには localStorage
、 使う for
ループ:
for (let i = 0; i < localStorage.length; i++){
}
The key()
メソッドは引数として整数を取り、対応するキーを返します。 とともに for
ループ、パス i
の整数として key()
:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
}
使用 getItem
対応する値を返すメソッド key
:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
}
作成する console.log
両方を印刷するステートメント key
と value
画面に:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}
The key()
繰り返し処理するのに非常に便利です localStorage
を使用して for
ループします。 すべてのブラウザがサポートしているわけではありません localStorage
.
ステップ7—サポートを確認する
あなたはのためにテストすることができます localStorage
それがで利用可能かどうかを確認することによるサポート window
を使用するオブジェクト if
声明:
if (window.localStorage) {
// localStorage supported
}
使用できますか…のWebサイトを使用して確認することもできます localStorage
主要なブラウザ間でのサポート。
結論
あなたは使用することができます localStorage
また sessionStorage
キーと値のペアを格納するオブジェクト。 内のアイテムを操作できるようにする方法があります localStorage
. このチュートリアルでは、内のエントリを作成、削除、および更新しました localStorage
. また、JSONメソッドを使用して、配列とオブジェクトのデータを文字列に変換し、元に戻しました。
場合によっては、代わりにCookieを使用するのが最適な場合があります localStorage
また session
. クッキーとは何ですか?JavaScriptを使用してクッキーを操作する方法このトピックを徹底的にカバーし、素晴らしい次のステップです。