JavaScript で localStorage を使用する方法

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でのローカル ストレージとセッション ストレージの使用
  • JS 内の Json 文字列 + Cookie + ローカルストレージ
  • Javascript で SessionStorage と LocalStorage を使用する方法
  • JavaScript ローカル ストレージ: localStorage、sessionStorage、Cookie の使用
  • jsでローカルストレージを操作する方法

<<:  ディスクを破壊せずに Linux で dd コマンドを使用する方法

>>:  MySQL5.7 マスタースレーブ構成例の分析

推薦する

Docker イメージのプルとタグ操作 pull | tag

Fabric プロジェクトのソースコードを読み直してみたところ、Docker の部分でよくわからな...

Linux ssh サーバーの構成コード例

LinuxホストにSSHサーバーをインストールするには、次のターミナルコマンドを使用します: sud...

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

Windows で nginx を素早くインストールし、自動的に起動するように設定する

目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...

HTML で余分なテキストを省略記号に変換する方法

HTML で余分なテキストを省略記号として表示したい場合は、いくつかの方法があります。 1行テキスト...

MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...

Centos6でgitlabを構築する方法

序文元のプロジェクトは、パブリックネットワークgitlabに配置されていました。セキュリティ上の理由...

HTML+CSSは、要素の位置までスクロールして読み込みアニメーション効果を表示します。

要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか?初期パラメータ...

Linux trコマンドの使い方

01. コマンドの概要tr コマンドは、標準入力からの文字を置換、圧縮、削除できます。ある文字セット...

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...