概要: このチュートリアルでは、Storage型と、永続的なデータを保存するためにJavaScriptのlocalStorageを使用する方法について学習します。
Storage型の概要
Storage型は、名前と値のペアを保存するように設計されています。Storage型は、以下の追加メソッドを持つObjectです。
setItem(name, value)– 名前に対する値を設定します。removeItem(name)– nameで識別される名前と値のペアを削除します。getItem(name)– 指定された名前の値を取得します。key(index)– 指定された数値の位置にある値の名前を取得します。clear()– すべての値を削除します。
Storageオブジェクト内の名前と値のペアの数を取得するには、lengthプロパティを使用できます。
Storageオブジェクトは文字列のみを保存できます。文字列以外のデータは、保存前に自動的に文字列に変換されます。
Storageオブジェクトからデータを取得するときは、常に文字列データが取得されます。
JavaScript localStorageオブジェクト
HTML5仕様では、localStorageを、Webブラウザに有効期限のないデータを保存する方法として導入しています。
言い換えると、ブラウザに保存されたデータは、ブラウザウィンドウを閉じた後も保持されます。
localStorageに保存されたデータは、オリジンにバインドされています。つまり、localStorageはprotocol://host:portごとに一意です。
localStorageとCookieの比較
まず、localStorageに保存されたデータは、Cookieのように、すべてのリクエストでサーバーに送信されません。このため、localStorageにはより多くのデータを保存できます。
最新のWebブラウザのほとんどでは、localStorageに最大5MBのデータを保存できます。Cookieには最大4KBを保存できることに注意してください。
次に、localStorageに保存されたデータは、クライアント、具体的にはWebブラウザ内のJavaScriptによって管理できます。サーバーからアクセスすることはできません。
ただし、Cookieは、Webブラウザとサーバーの両方のJavaScriptによって管理できます。
localStorageへのアクセス
localStorageには、windowオブジェクトのプロパティを介してアクセスできます。
window.localStorageCode language: JavaScript (javascript)localStorageはStorage型のインスタンスであるため、Storage型のメソッドを使用してデータを管理できます。
コンソールで次のコードを入力すると
window.localStorageCode language: JavaScript (javascript)…次のオブジェクトが表示されます。
Storage {length: 0}Code language: CSS (css)1) setItem()メソッド
次は、setItem()メソッドを使用して、名前と値のペアをlocalStorageに保存する方法です。
window.localStorage.setItem('theme','dark');Code language: JavaScript (javascript)2) lengthプロパティ
名前と値のペアの数を取得するには、次のようにlengthプロパティを使用します。
console.log(window.localStorage.length); // 1Code language: JavaScript (javascript)windowオブジェクトはグローバルなので、明示的に指定する必要はありません。たとえば
console.log(localStorage.length); // 1Code language: JavaScript (javascript)3) getItem()メソッド
キーで値を取得するには、getItem()メソッドを使用します。次の例では、getItem()メソッドを使用してthemeキーの値を取得しています。
localStorage.getItem('theme'); // 'dark'Code language: JavaScript (javascript)4) removeItem()メソッド
キーで名前と値のペアを削除するには、removeItem()メソッドを使用します。たとえば
localStorage.removeItem('theme');Code language: JavaScript (javascript)5) localStorageオブジェクトのキーをループする
次は、3つの名前と値のペアをlocalStorageに保存する方法です。
localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');Code language: JavaScript (javascript)localStorageに保存されている名前と値のペアを反復処理するには、Object.keys()メソッドとfor...ofループを使用します。
let keys = Object.keys(localStorage);
for(let key of keys) {
console.log(`${key}: ${localStorage.getItem(key)}`);
}Code language: JavaScript (javascript)出力
color: #111
theme: light
backgroundColor: whiteCode language: HTTP (http)オブジェクトの保存
Storage型は文字列データのみを保存します。オブジェクトを保存するには、JSON.stringify()メソッドを使用して文字列に変換する必要があります。たとえば
const settings = {
backgroundColor: '#fff',
color: '#111',
theme: 'light'
};
localStorage.setItem('settings', JSON.stringify(settings));
console.log(localStorage.getItem('settings'));Code language: JavaScript (javascript)出力：（文字列）
'{"backgroundColor":"#fff","color":"#111","theme":"light"}'Code language: JavaScript (javascript)次は、localStorageから値を取得し、JSON.parse()メソッドを使用してオブジェクトに戻す方法です。
let storedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(storedSettings);Code language: JavaScript (javascript)storageイベント
Storageオブジェクトに変更を加えると、ドキュメントでstorageイベントが発生します。
storageイベントは、次のシナリオで発生します。
setItem()メソッドを呼び出して、名前と値のペアを保存します。removeItem()メソッドを呼び出して、名前と値のペアを削除します。- そして、
clear()メソッドを呼び出してすべての値を削除します。
storageイベントには、次のプロパティがあります。
domain– ストレージが変更されたドメイン。key– 設定または削除されたキー。newValue– キーが設定された値、またはキーが削除された場合はnull。oldValue– キーが設定または削除される前の値。
storageイベントをリッスンするには、次のようにwindowオブジェクトのaddEventListener()メソッドを使用します。
addEventListener('storage', function(e){
console.log(`The value of the ${e.key} changed for the ${e.domain}.`);
});Code language: JavaScript (javascript)まとめ
Storage型は、Webブラウザでデータを保存および管理するためのメソッドを提供します。localStorageは、Webブラウザに永続的なデータを保存できるようにするStorage型のインスタンスです。localStorageは文字列のみを保存できます。オブジェクトを保存するには、JSON.stringify()メソッドを使用して文字列に変換します。そして、JSON.parse()メソッドを使用して、localStorageから取得したときに文字列をオブジェクトに変換します。
