JavaScript（しばしばJSと略されます）は、現代のWebインフラストラクチャの基盤の1つです。これは、ファーストクラス関数をサポートする、軽量で解釈実行されるオブジェクト指向プログラミング言語です。JavaScriptは主に動的なWebページでの実装で知られています。しかし、その機能により、JavaScriptはブラウザ以外の環境でも使用されています。
このガイドでは、2つのJavaScriptオブジェクト: localStorage と sessionStorage.
localStorageとsessionStorageの概要
オブジェクト localStorage および sessionStorage は、Web Storage APIの一部として提供されています。これは、キーと値のペアをローカルに保存するための優れたツールです。 localStorage および sessionStorage を使用することは、クッキーに代わる優れた方法です。このアプローチには、いくつかの追加の利点があります：
- データはローカルに保存され、サーバーから読み取ることはできません。これにより、クッキーに伴うセキュリティの問題が解消されます。
- より大きな保存容量（ほとんどの最新ブラウザで最大10 MB）が可能です。
- シンプルでわかりやすい構文。
これらのオブジェクトはすべての最新のWebブラウザでサポートされているため、ブラウザの互換性の問題は発生しません。クッキーは、認証など、多くの状況で依然として有用です。しかし、 localStorage や sessionStorage の方が優れたソリューションを提供する状況もあります。
前提条件
このチュートリアルに示されている手順を実行するには、次のコンポーネントが必要です。
- 適切に設定されたLinuxサーバー。このガイドでは、CloudSigmaでの独自のUbuntuサーバーのセットアップ.
- Node.js をJavaScriptランタイムとして使用します。詳細については、こちらからUbuntuにNode.jsをインストールする方法.
- 最新のWebブラウザ。例えば、Google Chrome または Firefox.
デモンストレーション用に、JSスクリプトが添付されたサンプルWebページを用意しました。詳細については、こちらからHTMLファイルにJavaScriptを追加する方法:
テキストエディタとしては、Visual Studio Code:
localStorageとsessionStorageの違いは何ですか？
両方の localStorage と sessionStorage は同じAPIに由来しています。それらの動作も同一です。唯一の違いは、各オブジェクトがデータを永続化する方法にあります。 sessionStorage の場合、データはウィンドウまたはタブが閉じられるまで保持されます。 localStorage の場合、データはブラウザのキャッシュがクリアされるか、Webアプリがそれをクリアするまで保持されます。
このチュートリアルでは、主に localStorage に焦点を当てます。ただし、 sessionStorage の構文も同じです。ここでは、キー/値のペアを作成、読み取り、更新する方法を、以下を用いて紹介します： localStorage.
ステップ 1 – エントリの作成
次のようにして、 localStorage オブジェクトにエントリを宣言できます。これには setItem() を使用します。このメソッドは、キーとそれに対応する値の2つの引数を取ります。メソッドの構造は次のとおりです。
|
1 |
localStorage.setItem(<key>, <value>) |
次の例では、変数 key を作成しました。 setItem() メソッドを使用して、新しい key を設定し、その値を次のように設定しました： ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
ステップ 2 – エントリの読み取り
では、キーに保存されている値を読み取るにはどうすればよいでしょうか？ localStorage からキーを取得するには、メソッド getItem() を使用します。これはキーの名前を受け取り、そのキーに保存されている値を返します。取得したコンテンツを表示するために、 alert() メソッドを使用します：
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
次に、WebブラウザでWebページを開きます。そこには、次の場所に保存されている値が表示されるはずです： key:
ステップ 3 – エントリの更新
値は一度設定されると、変更されない限りそのまま残ります。同じ setItem() メソッドを同じ key に対して再度使用すると、古い値が自動的に新しい値に置き換えられます。
次の例では、まず key が値 ‘value’ で初期化されます。次の行で、もう一度 setItem() を呼び出し、値を ‘new value’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
このコードをブラウザで実行するとどうなるか見てみましょう：
ご覧の通り、キーの値は次のように設定されます： ‘new value’.
ステップ 4 – エントリの削除
もし、 localStorage (および sessionStorage も同様に) 内に不要になった複数のエントリがある場合は、後でそれらをクリアすることをお勧めします。これにより、後で使用するためのスペースが空きます。また、アプリのメモリ効率も向上します。
To delete an entry from localStorage からエントリを削除するには、専用のメソッド removeItem() があります。これは key を引数として受け取り、 localStorage のデータプールから削除します：
|
1 |
localStorage.removeItem(<key_to_remove>) |
スクリプトに実装してみましょう：
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
実行すると、出力は null となります。値が存在しないためです： key:
ステップ 5 – エントリのクリア
前の例では、1つのキーのみを削除しました。しかし、 localStorage を使用すると、保存されているすべてのアイテムを1ステップでクリアできます。すべてのエントリをクリアするために、 localStorage は次のメソッドを提供しています： clear()。このメソッドは引数を受け取りません：
|
1 |
localStorage.clear(); |
メソッドを実行してみましょう：
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
前と同様に、これによりすべてのエントリが localStorage から削除されるため、次の key の値にアクセスしようとすると、返されるのは null:
ステップ 6 – JSONの操作
-
オブジェクトと配列の保存
The localStorage と sessionStorage オブジェクトは文字列値のみを保存できます。しかし、オブジェクトや配列を扱う必要がある場合もあります。その場合は、それらを文字列に変換する必要があります。
JavaScriptには、配列やオブジェクトを受け取って文字列に変換する JSON.stringify() 機能が備わっています。この投稿では、JSON形式の簡単な概要を紹介しています。より詳細なガイドについては、JSON in JavaScript.
この例では、 sampleObj という、 name と location という2つのフィールドを持つオブジェクトを作成しました。これを文字列に変換し、次のキーに保存します： key:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
ここでの出力は、オブジェクトのデータを含む文字列になります：
-
オブジェクトと配列の読み込み
保存する際、オブジェクトと配列を文字列に変換しました。この文字列を取得して、元の形式に戻すこともできます。そのためには、次のメソッド JSON.parse() を使用します。これは文字列を受け取り、JSON形式に戻します：
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
出力については、再度文字列に変換し、見やすくフォーマットしました：
ステップ 7 – localStorage内のアイテムの確認
このセクションでは、 localStorage と sessionStorage にアイテムが含まれているかどうか。シンプルな if 文を使用すると、 localStorage または sessionStorage の長さを確認できます。アイテムが存在する場合、長さは0より大きくなります。
まず、次の例を実装します。
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
ここで、出力は ‘true’ になります。これは、次の場所に1つのキーが存在するためです： localStorage:
ステップ 8 – アイテムの反復処理
The localStorage と sessionStorage オブジェクトは、配列のような構造でキーを保存します。これらは forEach メソッドをサポートしていないため、各アイテムを反復処理するには、古典的な手法である for ループを使用する必要があります。
次の例では、 localStorage が空かどうかを確認します。空でない場合は、各アイテムを反復処理します：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
出力には、すべてのアイテムが1つずつ表示されます：
ステップ 9 – ブラウザのサポートの確認
We can check support for localStorage （および sessionStorage）のサポートは、それが window オブジェクトで利用可能かどうかを確認することでチェックできます。シンプルな if 文で確認できます：
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
ウェブブラウザでコードを実行します：
最後に
このガイドでは、JavaScript で localStorage および sessionStorage オブジェクトを使用して、ブラウザにキーと値のペアを保存する方法を説明しました。構文は非常にシンプルで扱いやすいものです。キーと値のペアを作成、削除、更新する方法を紹介しました。また、オブジェクトや配列を文字列に変換して保存する（およびその逆の）方法についても説明しました。
JavaScript の知識をさらに深めるには、当ブログのチュートリアルをご覧ください：:
- JavaScriptの基本：日付と時間の操作方法
- JavaScript：文字列のインデックス作成、分割、操作方法に関するチュートリアル
- JavaScriptの操作：クラスの仕組み
- JavaScriptの操作：プロトタイプと継承の仕組み
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。