ブラウザストレージのマスタリング:localStorage と sessionStorage の説明

Web アプリケーションで扱うデータを管理するために、必ずしもデータベースが必要というわけではありません。それぞれのブラウザ ストレージ機能は、Chrome (バージョン 4 以降)、Mozilla Firefox (バージョン 3.5 以降)、Internet Explorer (バージョン 8 以降)、および iOS や Android などのさまざまなブラウザでサポートされています。

ブラウザ ストレージには主に localStorage と sessionStorage の 2 つの可能性があります。

localStorage に保存されたコンテンツ/データ オブジェクトは、ブラウザを再起動した後 (閉じて再度開いた後) に使用できるようになります。 アイテムを保存するには localStorageまで 、メソッド setItem() を使用できます。 。このメソッドにはキーと値を渡す必要があります。

Example: localStorage.setItem("mykey","myvalue");

ローカルストレージからアイテムを取得するには 、メソッド getItem を使用する必要があります。 getItem メソッドには、取得するデータのキーを渡す必要があります。

 Example: localStorage.getItem("mykey");

localStorage からアイテムを削除できます removeItem() を使用して 方法。このメソッドには、削除する項目のキーを渡す必要があります。

 Example: localStorage.removeItem("mykey");

localStorage 全体をクリアするには 、clear() を使用する必要があります。 localStorage のメソッド オブジェクト:

 Example: localStorage.clear();

セッションストレージ

sessionStorage に保存されたアイテム オブジェクトは、ユーザーがブラウザを閉じるまで残ります。その後、ストレージがクリアされます。

アイテムを sessionStorage に保存できます。 、メソッド setItem() を使用してください。 sessionStorage で オブジェクト:

Example: sessionStorage.setItem("mykey","myvalue");

セッションストレージからアイテムを取得するには 、メソッド getItem を使用する必要があります。 getItem メソッドには、取得するデータのキーを渡す必要があります。

 Example: sessionStorage.getItem("mykey");

sessionStorage からアイテムを削除できます removeItem() を使用して 方法。このメソッドには、削除する項目のキーを渡す必要があります。

 Example: sessionStorage.removeItem("mykey");

sessionStorage 全体をクリアするには 、clear() を使用する必要があります。 sessionStorage のメソッド オブジェクト:

 Example: sessionStorage.clear();

配列を localStorage と sessionStorage に保存する

単一の値を localStorage に保存することはできません。 および sessionStorage ですが、配列の内容を保存することもできます。

この例では、数値を含む配列があります。

var ourArray =[1,2,3,4,5];

これで、localStorage に保存できるようになりました。 または sessionStorage setItem() を使用する メソッド:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

または、sessionStorage の場合 :

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

保存するには、まず配列を文字列に変換する必要があります。上に示した例では、JSON.stringify を使用しています。 これを実現するためのメソッド。

localStorage からデータを取得するとき または sessionStorage 、配列に変換し直します。

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

または、sessionStorage の場合 :

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう