HTML5 Webストレージを備えたクライアント側ストレージ

HTML5 Webストレージは、LocalStorageとSessionStorageを含むクライアントストレージメカニズムであり、前者はストレージを維持し、後者はセッション中にのみ有効です。容量が大きく、リクエストでデータを送信せず、ユーザーの好み、フォームステージング、軽量認証、およびクロスページ通信を覚えるのに適しています。使用する場合は、文字列のみを保存するように注意する必要があります。自動有効期限メカニズムはなく、同期操作はパフォーマンスに影響を与える可能性があり、サブドメイン名はデータを共有しません。サーバーまたはhttponly Cookieに機密情報を保存することをお勧めします。

ブラウザに一時的にデータを保存する必要がある状況に遭遇することがよくありますか？たとえば、ユーザーのログインステータスを覚えており、いくつかの設定を保存し、Cookieを使用したくないのですが、これは古い方法です。 HTML5のWebストレージは、この問題を解決するために作成されました。

HTML5 Webストレージとは何ですか？

Webストレージは、HTML5が提供するクライアントストレージメカニズムであり、主にlocalStorageとsessionStorage 2つのタイプが含まれています。それらはすべて、ブラウザにキー価値ペアの形でデータを保存しますが、重要な違いが1つあります。

• LocalStorage ：ブラウザのキャッシュが手動でクリアされない限り、データは常に保存されます。
• SessionStorage ：現在のセッション中にのみ、ページまたはブラウザを閉じた後にデータがクリアされます。

Cookieと比較して、Webストレージの容量が大きく（通常、ドメイン名あたり約5MB）、各リクエストでサーバーに送信されず、ネットワーク上の負担が軽減されます。

Webストレージを使用してデータにアクセスする方法は？

実際には非常に簡単に使用できますが、基本的にはいくつかの方法を呼び出すことです。たとえば、ユーザーのユーザー名をローカルに保存する場合は、次のように書くことができます。

 localStorage.setItem（ 'username'、 'john_doe'）;

後でこの値を読みたいとき：

 let name = localstorage.getitem（ 'username'）;
console.log（name）; // output john_doe

特定のデータを削除する場合：

 localstorage.removeItem（ 'username'）;

すべてのデータをクリアしたい場合：

 localstorage.clear（）;

これらの方法はsessionStorageにも適用されますが、ライフサイクルは異なります。

Webストレージは文字列のみを保存できることに注意する必要があります。オブジェクトまたは配列を保存する場合は、 JSON.stringify()を使用して最初に変換する必要があります。

 let user = {name： 'john_doe'、age：25};
localStorage.setItem（ 'user'、json.stringify（user））;

取り出したら、それを分析します：

 let userdata = json.parse（localstorage.getitem（ 'user'））;

どのシナリオがWebストレージに適していますか？

• ウェブサイトのテーマ、フォントサイズなどなど、ユーザーの好みを覚えておいてください。毎回ユーザーに再選択する必要はありません。
• データをフォーム一時ストレージ：コンテンツの半分を入力した後、ユーザーは誤ってページを再表示します。 sessionStorageを使用して、以前のコンテンツを復元できます。
• 軽量認証情報：たとえば、JWTトークン。XSS攻撃リスクのため）長い間localStorage配置することはお勧めしませんが、一部のフロントエンドおよびバックエンド分離プロジェクトでは依然として一般的です。
• クロスページ通信： storageイベントを聞くことで、複数のタブ間で簡単なメッセージを渡すことができます。

たとえば、To Doアプリケーションに取り組んでいる場合、ユーザーが追加するタスクはlocalStorageに一時的に存在する可能性があり、更新されてもページは失われません。

何に注意を払うべきですか？

Webストレージは非常に便利ですが、注意を払うための「ピット」がいくつかあります。

• IE8以下のバージョンはサポートされていませんが、今すぐ使用する必要はありませんよね？
• 保存されたデータは文字列のみであり、複雑な構造はそれ自体でシリアル化と降下を処理する必要があります。
• 有効期限が切れる可能性のあるCookieとは異なり、データは自動的にexpiresなりません。
• すべての操作は同期されており、大規模なデータ操作はパフォーマンスに影響を与える可能性があります。
• 異なるサブドメイン間のデータは共有されていません。たとえば、 a.example.comとb.example.comにはそれぞれ独自のストレージスペースがあります。

アプリケーションにユーザーに敏感な情報などの高いセキュリティ要件がある場合は、HTTPonly Cookieまたはサーバーに配置することをお勧めします。

基本的にそれだけです。 Webストレージは複雑ではありませんが、詳細、特にデータ形式やセキュリティの側面を無視するのは簡単です。よくマスターすると、フロントエンドエクスペリエンスが大幅に向上する可能性があります。

以上がHTML5 Webストレージを備えたクライアント側ストレージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。