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 マスタースレーブ構成例の分析

推薦する

WordPress実験を実装するための3つの仮想マシンのKVM展開の詳細説明

1. KVM の概要カーネルベースの仮想マシンの略称は、Linux 2.6.20 以降のすべての主要...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

目次ネプローダーをインストールするプラグインのインポート始める配置折りたたみディスプレイノードをクリ...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

Mysql systemctl start mysqld によって報告されるエラーの解決策

エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...