HTML5は、クライアント側のデータストレージの2つのメカニズムを導入します: localStorage
とsessionStorage
。どちらもWebアプリケーションがユーザーのブラウザ内にデータを保存することを可能にしますが、範囲と持続性が異なります。これらを使用する方法は次のとおりです。
サポートの確認:
localStorage
またはsessionStorage
を使用する前に、ブラウザがそれらをサポートしているかどうかを確認してください。
<code class="javascript">if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage } else { // No web storage support }</code>
データの保存:
localStorage
とsessionStorage
両方が同じ方法を使用してデータを保存します。キーと値が文字列である場合に、キー価値のペアを保存できます。
<code class="javascript">localStorage.setItem("key", "value"); sessionStorage.setItem("key", "value");</code>
Syntax localStorage.key = "value"
またはsessionStorage.key = "value"
を使用することもできますが、一貫性や上書き方法やプロパティを回避するためにsetItem
が推奨されます。
データの取得:
データを取得するには、 getItem
使用します。
<code class="javascript">var data = localStorage.getItem("key"); var data = sessionStorage.getItem("key");</code>
キーが存在しない場合、 getItem
null
を返します。
データの削除:
特定のアイテムを削除するには:
<code class="javascript">localStorage.removeItem("key"); sessionStorage.removeItem("key");</code>
すべてのデータをクリアするには:
<code class="javascript">localStorage.clear(); sessionStorage.clear();</code>
オブジェクトの保存:
localStorage
およびsessionStorage
ストアの文字列であるため、オブジェクトはシリアル化する必要があります。 JSON.stringify
を使用してオブジェクトを文字列に変換してから保存する前にJSON.parse
を変換してそれらを変換します。
<code class="javascript">var obj = {name: "John", age: 30}; localStorage.setItem("user", JSON.stringify(obj)); var retrievedObj = JSON.parse(localStorage.getItem("user"));</code>
localStorage
とsessionStorage
にはいくつかの重要な違いがあります。
範囲:
localStorage
データは、同じオリジン(ドメイン、プロトコル、ポート)のすべてのWindowsまたはタブが利用できます。sessionStorage
データは、作成したウィンドウ/タブに制限されています。ウィンドウ/タブが閉じている場合、データは失われます。永続性:
localStorage
データは持続します。sessionStorage
データがクリアされます。使用法:
localStorage
使用します。sessionStorage
使用します(例:一時的なフォームデータ)。HTML5 Webストレージは便利ですが、考慮する必要があるセキュリティの制限があります。
データの感度:
アクセス制御:
データの整合性:
安全なコンテキスト:
データの露出の制限:
localStorage
とsessionStorage
の効果的な管理には、データを効率的に整理し、パフォーマンスを維持することが含まれます。
ネームペース:
userSettings
の代わりにmyApp.userSettings
。構造化されたデータ:
データをJSONのような構造化された形式で保存します。これにより、複雑なデータ構造の管理と取得が簡単になります。
<code class="javascript">var settings = { theme: "dark", notifications: true }; localStorage.setItem("myApp.settings", JSON.stringify(settings));</code>
インデックス作成:
大規模なデータセットについては、インデックスまたはメタデータシステムの実装を検討して、データをすばやく見つけて取得します。
<code class="javascript">var index = { user1: "myApp.user1.data", user2: "myApp.user2.data" }; localStorage.setItem("myApp.userIndex", JSON.stringify(index));</code>
データバージョン:
データ構造のバージョン化を実装して、更新を管理し、互換性を確保する:
<code class="javascript">var data = { version: "1.0", userData: { ... } }; localStorage.setItem("myApp.userData", JSON.stringify(data));</code>
パフォーマンス:
localStorage.length
を使用して、保存されているアイテムの数を確認し、それに応じてデータを管理します。定期的なクリーンアップ:
不必要なストレージの使用を防ぐために、時代遅れのデータを定期的に確認してクリーンアップします。
<code class="javascript">for (var i = 0; i </code>
これらのプラクティスに従うことにより、 localStorage
およびsessionStorage
に保存されたデータを効果的に管理および整理し、効率的かつ安全なクライアント側のデータストレージを確保できます。
以上がクライアント側のデータストレージにHTML5 Webストレージ(LocalStorageおよびSessionStorage)を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。