.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 オブジェクトは、ブラウザーでネイティブにサポートされている 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 の制限について簡単に説明します。
JavaScript で localStorage を使用する方法についての記事はこれで終わりです。JavaScript で localStorage を使用する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ディスクを破壊せずに Linux で dd コマンドを使用する方法
Fabric プロジェクトのソースコードを読み直してみたところ、Docker の部分でよくわからな...
LinuxホストにSSHサーバーをインストールするには、次のターミナルコマンドを使用します: sud...
CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...
目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...
1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...
HTML で余分なテキストを省略記号として表示したい場合は、いくつかの方法があります。 1行テキスト...
データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...
序文元のプロジェクトは、パブリックネットワークgitlabに配置されていました。セキュリティ上の理由...
要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか?初期パラメータ...
01. コマンドの概要tr コマンドは、標準入力からの文字を置換、圧縮、削除できます。ある文字セット...
1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...
設置環境WIN10 VMware Workstation Pro 15.0.0 ビルド 101344...
質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...