導入
フォームに入力中に誤ってウェブページを閉じてしまうと、イライラしてしまうことがあります。入力したデータがすべて失われ、最初からやり直さなければならなくなるからです。この記事では、JavaScriptでlocalStorageを使用して、ブラウジングセッションを超えてデータを保存する方法を学びます。このメカニズムとWindow.localStorageプロパティの使い方を説明し、JavaScriptにおけるウェブストレージの基本を復習します。.
JavaScript の LocalStorage とは何ですか?
localStorageは、サイトやJavaScriptアプリケーションがキーと値のペアを有効期限なしでウェブブラウザに保存できる機能です。つまり、保存されたデータは、ユーザーがブラウザを閉じたり、コンピュータを再起動したりした後でも保持されます。.
localStorage は window オブジェクトのプロパティであり、ブラウザウィンドウとやり取りして操作できるグローバルオブジェクトになります。また、他の window プロパティやメソッドと組み合わせて使用することもできます。.
Window.localStorage とは何ですか?
localStorage メカニズムは、Window.localStorage プロパティを通じて利用できます。Window.localStorage は、DOM ドキュメントを含むウィンドウを表す JavaScript の Window インターフェイスの一部です。.
Window インターフェースには、幅広い関数、コンストラクタ、オブジェクト、名前空間があります。Window.localStorage は読み取り専用プロパティで、それを作成したリソースのみがアクセスできるデータを保存するために使用されるローカルストレージオブジェクトへの参照を返します。.
localStorage を使用する場合
簡単に言うと、localStorageはデータの保存と取得に使用されます。localStorageには少量のデータを保存できますが、大規模なデータセットには適していません。localStorageはデバイスを使用するすべてのユーザーがアクセスできるため、機密情報の保存には使用しないでください。言語やテーマなどのユーザー設定を保存するのに使用できます。また、頻繁に使用される場合は、データのキャッシュにも使用できます。localStorageは、ユーザーがブラウザを閉じても失われないフォームデータを保存できます。.
ログインが必要なアプリケーションをお持ちの場合は、localStorage を使ってセッションデータを保持できます。ブラウザを閉じて再度開いた後でもログイン状態を維持できます。このチュートリアルの後半で、簡単なアプリケーションを使ってこの仕組みを説明します。.
localStorage はどこに保存されますか?
Google Chromeでは、ウェブストレージデータはユーザープロファイル内のサブフォルダ内のSQLiteファイルに保存されます。このサブフォルダは、Windowsマシンでは\AppData\Local\Google\Chrome\User Data\Default\Local Storage、macOSでは~/Library/Application Support/Google/Chrome/Default/Local Storageにあります。Firefoxでは、ストレージオブジェクトはwebappsstore.sqliteというSQLiteファイルに保存されます。このファイルもユーザープロファイルフォルダ内にあります。.
WebストレージAPIの紹介
localStorageはWeb Storage APIの2つのメカニズムのうちの1つで、もう1つはsessionStorageです。Web Storage APIは、ブラウザがキーと値のペアを保存できるようにする一連のメカニズムです。Cookieを使用するよりもはるかに直感的に操作できるように設計されています。.
キーと値のペアは、オブジェクトに似たストレージオブジェクトを表します。ただし、ページの読み込み中もキーと値のペアは保持され、常に文字列である点が異なります。これらの値には、オブジェクトと同じようにアクセスすることも、getItem() メソッドを使用してアクセスすることもできます（詳細は後述）。.
sessionStorageとlocalStorage
sessionStorageとlocalStorageはどちらも、ページセッション期間中利用可能なリソースごとに個別のストレージ領域を持ちます。両者の主な違いは、sessionStorageは1つのストレージ領域のみを保持することです。ブラウザが開いている間（ページの再読み込みや更新時を含む）は、localStorageはブラウザを閉じた後もデータを保存し続けます。.
localStorage は有効期限のないデータを保存しますが、sessionStorage はセッション中のデータのみを保存します。シークレットブラウジングセッションで読み込まれた localStorage データは、最後のプライベートタブが閉じられた後に消去される点にご注意ください。setItem SessionStorage メソッドは、一時的なデータ保存が必要な場合に便利であり、現在のセッションを超えてデータの永続性を必要としない状況で使用してください。.
SessionStorage は通常、localStorage に比べてストレージ制限が低く、リソースごとに数メガバイトに制限されることが多いです。そのため、ブラウザリソースを過度に消費することなく、ユーザーセッション中に一時データを保存するのに適しています。.
一方、LocalStorageはより大きなストレージ容量を提供し、通常はオリジンごとに5～10MBの範囲です。複数のセッションにまたがって保存する必要がある大容量データの保存に適しています。.
LocalStorageのメリットとデメリット
JavaScriptのlocalStorageは、クライアントサイドのデータを保存するための重要なツールです。しかし、考慮すべきメリットとデメリットがいくつかあります。.
利点
LocalStorage の第一の利点は、以前にも何度か触れたように、保存されたデータに有効期限がないことです。オフラインでもデータにアクセスでき、localStorage はインターネット接続なしでも使用できるデータを保存します。.
localStorage でデータを保存すると、Cookie で保存するよりも安全になり、データの制御も強化されます。さらに、localStorage は Cookie に比べてストレージ容量が大きくなっています。Cookie は 4 キロバイトのデータしか保存できませんが、LocalStorage は最大 5 メガバイトのデータを保存できます。.
デメリット
localStorage は同期的であるため、各操作は順番に実行されます。データセットが小さい場合は問題が最小限に抑えられますが、データ量が増加すると大きな問題になる可能性があります。.
LocalStorageはCookieよりも安全ですが、機密データの保存には使用すべきではありません。ユーザーのデバイスにアクセスできる人なら誰でも、localStorageに保存されたデータにアクセスできます。また、localStorageは文字列しか保存できないため、他の種類のデータを保存する場合は文字列に変換する必要があります。さらに、localStorageに大量のデータを保存すると、アプリケーションの速度が低下する可能性があります。.
LocalStorage はどのように機能しますか?
これまで何度も耳にしたことがあるでしょう。localStorage はデータを保存します。そして、データを保存するということは、後でそのデータを取得する必要があるかもしれないということです。このセクションでは、localStorage がどのように動作するのかを詳しく見ていきます。その仕組みを以下にまとめます。
- setItem(): キーと値をlocalStorageに追加します
- getItem(): localStorageからアイテムを取得します
- removeItem(): localStorageからアイテムを削除します
- clear(): localStorageからすべてのデータをクリアします
- key(): ローカルキーを取得するための数値を格納する
setItem() でデータを保存する
setItem() メソッドを使うと、localStorage に値を保存できます。このメソッドはキーと値の2つのパラメータを取ります。キーは後で参照することで、関連付けられた値を取得できます。実際のコードは以下のようになります。
localStorage.setItem('name', 'Obaseki Nosa');
上記のコードでは、nameがキーで、Obaseki Nosaが値であることがわかります。前述の通り、localStorageは文字列のみを保存できます。配列やオブジェクトをlocalStorageに保存するには、それらを文字列に変換する必要があります。.
これを実行するには、次のように、setItem() に渡す前に JSON.stringify メソッドを使用します。
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));getItem() で情報を取得する
getItem() を使うと、ブラウザの localStorage オブジェクトに保存されているデータにアクセスできます。このメソッドはキーというパラメータのみを受け取り、値を文字列として返します。
localStorage.getItem('name');
これは「Obaseki Nosa」という値を持つ文字列を返します。指定されたキーがlocalStorageに存在しない場合はnullを返します。配列の場合は、JSON文字列をJavaScriptオブジェクトに変換するJSON.parse()メソッドを使用します。
JSON.parse(localStorage.getItem('user'));
上記で作成した配列を使用して、localStorage から取得する方法は次のとおりです。
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);このメソッドは配列[“Obaseki”, 25]を返します。ウェブページを調べてコンソールで確認するには、次のようにします。
この画像はFirefoxで取得したものなので、他のブラウザでは表示が少し異なります。localStorageに保存されていない別の配列と比較してみましょう。
const userArray2 = ["Oscar", 27];
console.log(userArray2);これで、コンソールに次に示すように 2 つの配列が表示されます。
通常、コードエディタでコメントアウトすれば、コンソールから消えるはずです。ただし、localStorageに保存されているものは残ります。以下に例を示します。
removeItem() でデータを削除する
localStorageからアイテムを削除するには、removeItem()メソッドを使用します。キー名を渡すと、removeItem()メソッドは既存のキーをメモリから削除します。指定されたキーに関連付けられたアイテムがない場合、このメソッドは何も行いません。コードは次のとおりです。
.localStorage.removeItem('name');
localStorage 内のすべてを削除する方法: clear()
localStorage 内のすべてのデータを削除するには、clear() メソッドを使用します。このメソッドを呼び出すと、そのドメインのすべてのレコードがストレージ領域から消去されます。パラメータは不要です。以下のコードを使用してください。
localStorage.clear();
キーの名前を取得する方法: key()
key() メソッドは、キーをループ処理しながらも、数値またはリストを localStorage に渡してキー名を取得したい場合に便利です。具体的には以下のようになります。
localStorage.key(index);インデックス パラメータは、名前を取得するキーの 0 から始まるインデックスを表します。.
localStorageとCookie
LocalStorageとCookieはどちらもクライアント側のデータを保存するために使用されます。前述の通り、Cookieは最大4キロバイトのデータしか保存できず、これはLocalStorageの5メガバイトのストレージ容量よりも大幅に少ないです。.
CookieはHTTPリクエストごとに自動的にサーバーに送信されますが、localStorageはユーザーのデバイス上にローカルに残ります。これにより、サーバーとデータを共有しないため、ウェブパフォーマンスが向上し、ネットワークトラフィックが増加することもありません。.
ご覧のとおり、localStorage に保存されたデータには有効期限がありません。手動で削除しない限り、データは無期限に保存されます。一方、Cookie は、一定期間経過後、またはブラウザが閉じられた時点で有効期限が切れるように設定できます。Cookie には通常、ユーザーの設定やログイン/認証情報などのデータが保存されます。これらのデータは、ブラウザのすべてのタブとウィンドウでアクセスできます。ただし、localStorage は特定のプロトコルまたはドメインでアクセス可能なデータのみを保存します。.
ブラウザのlocalStorageサポート
localStorageは、Webストレージの一種であり、HTML5の仕様です。Internet Explorer v8を含む主要なブラウザでサポートされています。ブラウザがlocalStorageをサポートしているかどうかを確認するには、次のスニペットを使用してください。
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}localStorageでデータを管理するための高度なテクニック
次は、ローカルストレージでデータを管理するための高度なテクニックをいくつか見ていきます。キーを効果的に削除する方法、オブジェクトの保存と整理に関するベストプラクティスを適用する方法、複雑なデータにJSON解析と文字列化を適用する方法について学びます。.
効果的なキーの削除
ストレージ容量を最適化するには、localStorage に保存されているオブジェクトからキーを効果的に削除することが不可欠です。特に、データが頻繁に更新または削除されるアプリケーションを構築する場合は重要です。不要なキーを削除することで、LocalStorage が不要なデータでクラスタ化されるのを防ぐことができます。.
localStorage内のオブジェクトからキーを効果的に削除するには、キーを使ってオブジェクトを取得し、必要なプロパティを削除してから、更新されたオブジェクトをlocalStorageに返します。これにより、不要なデータ操作とストレージのオーバーヘッドが最小限に抑えられます。
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));オブジェクトを保存して整理する
JSON解析と文字列化は、localStorageへのデータの保存と取得時に複雑なデータ構造を管理するための強力な技術です。JavaScriptオブジェクトとJSON文字列間の変換が容易になり、効率的なデータ管理と操作が可能になります。.
オブジェクトや配列などの複雑なデータ構造をlocalStorageに保存する場合は、localStorageに設定する前にJSON.stringify()を使用して文字列化することが不可欠です。これにより、JavaScriptオブジェクトがJSON文字列に変換され、キーと値のペアとして保存できるようになります。
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));ネストされたオブジェクトまたは配列を扱う場合は、データ構造の整合性を維持するために、すべてのネストされたオブジェクトも文字列化および解析されていることを確認してください。
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));結果
この記事では、JavaScript における LocalStorage の機能について解説しました。これは、Cookie に依存せずにデータを保存および取得するためのシンプルで効率的な方法です。localStorage の使い方とタイミング、そして localStorage へのアイテムの保存、取得、削除方法についても説明しました。また、LocalStorage の動作を実際の例で示し、Cookie と比較しました。.
この記事では、localStorageの使い方と使用タイミングについて学びました。localStorageへのアイテムの保存、取得、削除方法についても解説しました。また、LocalStorageが実際のシナリオでどのように機能するかを確認するために、実際に動作するアプリケーションを作成しました。最後に、cookieと比較しました。.
幅広いブラウザをサポートし、使いやすく優れたツールが揃っているので、あなたは正しい場所にたどり着いたことになります。.
