JavaScript で localStorage を使用する方法

.NET の世界に参入したい開発者であれば、何が可能なのかを知る必要があります。 .NET Framework は .NET エコシステムで最も人気のあるテクノロジであるため、さまざまなアプリケーションの構築に使用できますが、最近では .NET Core や .NET Standard ライブラリなどの新しいものが登場しています。私たちのプロジェクトやビルドで使用できますか?

localStorage オブジェクトは、Web プログラミングで最も広く使用されているオブジェクトの 1 つです。これは、キーと値のペアをユーザーのコンピューターにローカルに保存するためのシンプルなソリューションを提供します。

ほとんどの Web 開発者は、構文がシンプルで最大 5 MB のデータを格納できるため、localStorage API を好みます。

さらに、すべての主要ブラウザの最新バージョンは、localStorage と sessionStorage を含む Web Storage API をサポートしています。 Opera Mini のみが Web ストレージ API をサポートしていません。

Chrome DevTools を開くと、ブラウザが webstorage API をサポートしているかどうかを簡単に確認できます。コンソールに移動し、次のコードスニペットを入力して Enter キーを押します。

typeof(ストレージ)

undefined を受け取った場合、ブラウザは webstorage API をサポートしていません。ブラウザがサポートしている場合は、「機能」が表示されます。

この記事では、以下の質問について検討します。

localStorageとは何ですか?
localStorage と sessionStorage の違いは何ですか?
localStorage API を使用して CRUD 操作を実行する方法
一般的なローカルストレージの落とし穴は何ですか?
localStorage の制限は何ですか?

localStorageとは何ですか?

前述したように、localStorage オブジェクトは、ブラウザーでネイティブにサポートされている webstorage API の一部です。これはシンプルでありながら効果的なキー/値ストレージソリューションです。

Web 開発者にとって、localStorage オブジェクトを使用する最大の利点は、オフラインストレージです。最も重要なことは、ユーザーがブラウザを閉じたり、コンピューターを再起動したりしてもデータが失われないことです。ウェブサイトは localStorage API を使用して、コンピュータを再起動した後でも、ユーザーのコンピュータにローカルに保存されているデータを読み取ることができます。

このソリューションは、Web 開発者にとって興味深い使用例をいくつか提供します。

ウェブサイトのユーザー設定をオフラインで保存する
ユーザーの検索履歴を保存する
カートに商品を入れる

次に、localStorage と sessionStorage を比較してみましょう。

localStorage と sessionStorage の違いは何ですか?

2 つの API は同一に見えますが、実装方法には微妙な違いがあります。

localStorage API はデータをローカルに保存するために使用されます。したがって、ユーザーがタブを更新したり、ブラウザを閉じたり、コンピューターを再起動したりしても、ローカルに保存されたデータは失われません。重要なデータを長期保存するための理想的なソリューションです。

sessionStorage API はページを更新しても存続しますが、同じタブ内でのみ機能します。

つまり、アプリケーションに適したストレージソリューションを選択する際には注意が必要です。たとえば、ユーザー設定情報を localStorage に保存するのがベストプラクティスです。対照的に、sessionStorage は特定のセッションのデータを保存するのに最適です。

localStorage API を使用して CRUD 操作を実行する方法

このセクションでは、localStorage API を使用して追加、読み取り、更新、または削除を行う方法を説明します。これを踏まえて、特定のページの localStorage をクリアするトリックを紹介します。

まず、localStorage オブジェクトに新しいキーと値のペアを作成しましょう。 setItem 関数はキーとその値を受け入れます。このキー名を再度使用して取得する必要がある場合があるため、キーに適切な名前を選択してください。

localStorage.setItem('my-key', 'some-value')

次に、新しく作成したオブジェクトを再度取得してみましょう。

アイテムを localStorage.getItem('my-key') にします。

console.log(item) // 出力: "some-value"

とても簡単です。では、my-key の値を更新してみましょう。同じ setItem 関数を使用して値を上書きすることに注意してください。

localStorage.setItem('my-key', '新しい値')

最後に、このキーを削除しましょう。 removeItem 関数は、削除するキーである 1 つのパラメーターを受け入れます。

localStorage.removeItem('my-key')

すべてのキーが削除されたことを確認するには、clear 関数を使用して、localStorage に保存されているアプリのすべてのコンテンツをクリアします。

ローカルストレージをクリアする()

これで、より高度な localStorage 操作の準備が整いました。

高度なローカルストレージ操作: トラバーサル

localStorage オブジェクトを反復処理してキーを検索するために使用されるメソッドを見てみましょう。

最初の方法は、最も直接的な for ループを使用します。 localStorage オブジェクトで length プロパティを直接使用できることに注意してください。

for(let i=0; i<localStorage.length; i++) {
 キーをlocalStorage.key(i)とします。
 console.log(`${key} と値 ${localStorage.getItem(key)}`)
}

key メソッドを直接使用して、対応するキーを取得することもできます。

(i = 0 とします; i < localStorage.length; i++){
 キーをlocalStorage.key(i)とします。
 console.log(キー)
}

次に、localStorage API を使用する際に避けるべき落とし穴を見てみましょう。

localStorage のよくある落とし穴

localStorage API を操作するときに最もよくある 2 つの問題点を見てみましょう。

まず、JSON オブジェクトを保存してみます。 localStorage API は、キー値ストレージとして設計されています。したがって、この値はオブジェクトではなく文字列のみを受け入れます。ただし、これはオブジェクトを保存できないことを意味するものではありません。それを文字列にシリアル化する必要があります。

const ディナー = { リンゴ: 5, オレンジ: 1 }
localStorage.setItem('my-dinner', JSON.stringify(dinner))

シリアル化されたオブジェクトを読み取るときは、再度 JSON に解析する必要があります。

夕食をJSON.parse(localStorage.getItem('my-dinner'))とします。

次に、ブール値を保存してみます。同様に、localStorage API は文字列のみをサポートします。ブール値を保存するときは注意してください。

幸いなことに、解決策は JSON オブジェクトを保存することに似ています。ブール値を保存する場合、setItem 関数はそれを「true」のような文字列に変換します。文字列でブール値を読み取るには、JSON.parse メソッドを使用してブール値に変換し直すことができます。

myBool = JSON.parse(localStorage.getItem('my-bool')) とします。

localStorage の制限

ここで、localStorage の制限について簡単に説明します。

文字列ベースのストレージ
ほとんどのブラウザのストレージ容量は5MBまでに制限されています。
巨大な文字列を保存しようとすると、メインスレッドがブロックされます。問題が発生する可能性があるため、同じキーを同時に更新しないようにしてください。この場合、localStorage API はこの目的のために設計されていないため、代替のストレージソリューションを探すのが最善です。
Web ワーカーまたは Web サービスは localStorage にアクセスできません
安全機構は内蔵されていません。したがって、パスワードや認証関連のデータを保存することはお勧めしません。ユーザーのブラウザにアクセスできる人なら誰でも、図書館の一般公開されているコンピューターと同じように、ページを開いて localStorage に保存されている情報を読み取ることができます。

JavaScript で localStorage を使用する方法についての記事はこれで終わりです。JavaScript で localStorage を使用する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: