LocalStorageとsessionStorageの概要

序章

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

データはローカルにのみ保存され、サーバーで読み取ることはできません。これにより、Cookieがもたらすセキュリティの問題が解消されます。
これにより、はるかに多くのデータを保存できます（ほとんどのブラウザーで10MB）。
構文は単純です。

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

前提条件

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

マシンにインストールされているNodeの最新バージョン。 Nodeをインストールするには、このNode.jsチュートリアルのインストール方法に概説されている手順に従ってください。
このJavaScriptでコーディングする方法シリーズで見つけることができるJavaScriptでのコーディングの基本的な理解。

ステップ1—`localStorage`と`sessionStorage`を理解する

localStorageとsessionStorageはほぼ同じで、APIも同じです。違いは、sessionStorageでは、ウィンドウまたはタブが閉じられるまでデータが保持されることです。 localStorageを使用すると、ユーザーがブラウザのキャッシュを手動でクリアするか、ウェブアプリがデータをクリアするまで、データが保持されます。このチュートリアルはlocalStorageを特徴としていますが、sessionStorageの構文は同じです。

この知識があれば、localStorageでキーと値のペアを作成、読み取り、更新できるようになります。

ステップ2—エントリの作成、読み取り、更新

setItem()メソッドを使用して、localStorageオブジェクトのエントリを作成できます。 setItem()メソッドは、keyと対応する値の2つの引数を取ります。

let key = 'Item 1';
localStorage.setItem(key, 'Value');

エントリを読み取るには、getItem()メソッドを使用します。 getItem()メソッドは、キーでなければならない1つの引数を取ります。この関数は、対応する値を文字列として返します。

let myItem = localStorage.getItem(key);

このコードは、myItemを'Value'に等しく設定します。これは、keyに対応する値です。

エントリの更新は、setItem()メソッドを使用して行われます。ここでも、2つの引数が必要です。 key引数は既存のキーになり、value引数は新しい値になります。

localStorage.setItem(key, 'New Value');

これで、keyのlocalStorage値は、'Value'ではなく'New Value'になります。

localStorageオブジェクトのエントリを作成、読み取り、更新できます。 localStorageの個々のエントリを削除して、すべてのエントリをクリアすることもできます。

ステップ3—エントリの削除とクリア

removeItem()メソッドを使用してエントリを削除できます。 removeItem()メソッドは、localStorageオブジェクトのキーとなる1つの引数を取ります。

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()メソッドを使用します。 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オブジェクト内にアイテムがあります。 localStorageにアイテムがない場合に備えて、elseステートメントを含めます。

if (localStorage.length > 0) {
  // ...
} else {
  // ...
}

ifおよびelseステートメントに適用するコードを含めることができます。 localStorageのアイテムを繰り返し処理することをお勧めします。

ステップ6—アイテムの反復

localStorageおよびsessionStorageオブジェクトは、forEachメソッドをサポートしていません。 localStorageの項目を反復処理するには、forループを使用します。

for (let i = 0; i < localStorage.length; i++){

}

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);
}

key()は、forループを使用してlocalStorageを反復処理するのに非常に便利です。すべてのブラウザがlocalStorageをサポートしているわけではありません。

ステップ7—サポートを確認する

ifステートメントを使用して、windowオブジェクトで使用可能かどうかを確認することにより、localStorageサポートをテストできます。

if (window.localStorage) {
  // localStorage supported
}

使用できますか…のWebサイトを使用して、主要なブラウザー間でlocalStorageがサポートされているかどうかを確認することもできます。

結論

localStorageまたはsessionStorageオブジェクトを使用して、キーと値のペアを格納できます。 localStorage内のアイテムを操作できるようにするメソッドがあります。このチュートリアルでは、localStorage内のエントリを作成、削除、および更新しました。また、JSONメソッドを使用して、配列とオブジェクトのデータを文字列に変換し、元に戻しました。

localStorageまたはsessionの代わりにCookieを使用するのが最適な場合があります。クッキーとは何ですか？JavaScriptを使用してクッキーを操作する方法このトピックを徹底的にカバーし、素晴らしい次のステップです。