開発者ドキュメント

localStorageとsessionStorageの概要

getdocs

序章

The localStorage と sessionStorage WebストレージAPIの一部であるオブジェクトは、キーと値のペアをローカルに保存するための2つの優れたツールです。 使用する localStorage と sessionStorage ストレージ用はCookieを使用する代わりに使用でき、いくつかの利点があります。

最新のすべてのブラウザでもサポートされているため、今日でも問題なく使用できます。 特に認証に関しては、Cookieは依然として有用ですが、使用する場合もあります。 localStorage また sessionStorage より良い選択肢かもしれません。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ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を使用してクッキーを操作する方法このトピックを徹底的にカバーし、素晴らしい次のステップです。

モバイルバージョンを終了