Vue における LocalStorage と SessionStorage の違いと使い方

以前、私はバックグラウンド検証メカニズム、主にCookie、セッション、トークンの使用、Django：Cookie設定とクロスドメインの問題の処理、Django実装：セッションを使用したCookie、Django：トークンベースの検証を整理しました。 もちろん、これはトークンが最良であることを意味するものではありません。 プロジェクトの要件に応じて選択する必要があり、混合して使用することもできます。

本日は、バックグラウンドから送信されたトークンをクライアントに保存します。これは、Cookie、LocalStorage、SessionStorage などに保存できます。Cookie については以前に紹介したので、ここでは省略します。主に LocalStorage と SessionStorage について説明します。

LocalStorageとは

LocalStorage は「ローカルストレージ」と訳されます。HTML5 の新しいストレージオブジェクトです。Cookie と同様に、ローカルストレージにも使用されますが、Cookie のストレージ容量不足の問題を解決します (各 Cookie のストレージ容量は 4k です)。一方、localStorage ブラウザは一般的に 5M をサポートし、通常はキー/値のペアの形式で保存されます。

SessionStorageとは

SessionStorage は「セッション ストレージ」と翻訳され、HTML5 に追加された新しいストレージ オブジェクトでもあります。同じウィンドウ内のデータをローカルに一時的に保存するために使用されます。ウィンドウが閉じられるとデータは削除されます。SessionStorage ブラウザーは一般に 5M をサポートしており、通常はキーと値のペアの形式で保存されます。

LocalStorage と SessionStorage の違い

LocalStorage のライフ サイクルは永続的です。LocalStorage 情報を積極的にクリアしない限り、情報は常にクライアントに保存されます。 SessionStorage のライフ サイクルは一時的なものであり、現在のセッション ウィンドウでのみ有効です。ページまたはブラウザーを閉じると、データは自動的にクリアされます。

LocalStorageとSessionStorageの特徴

1. LocalStorage または SessionStorage 内のデータは、異なるブラウザ間で共有できません。

2. LocalStorage と SessionStorage は統合された API インターフェースを使用できます。

3. LocalStorage または SessionStorage は通常、キーと値のペアの形式でデータを保存するため、保存時にデータ形式を変換する必要があります。JSON.stringify メソッドを使用してオブジェクトを文字列に変換し、抽出時に JSON.parse メソッドを使用して文字列をオブジェクトに変換します。

4. LocalStorage または SessionStorage は HTML5 の新しい属性であるため、新しいブラウザからのサポートが必要です。

LocalStorageとSessionStorageの使用

LocalStorage の用途は SessionStorage と同じなので、ここでは説明しません。LocalStorage を例に挙げます。

LocalStorage には、clear (LocalStorage をクリア)、getItem (ローカル データを取得)、key (添え字に対応するキーの値を取得)、removeItem (データを削除して保存)、setItem (データを設定するため) の 5 つのメソッドが用意されています。

具体的な使用方法と手順は以下のとおりです。localStorage. を直接使用して、対応するメソッドを呼び出すことができます。対応するアプリケーションプロパティを理解していれば、それらを使用できます。

このように、localStorage.setItem('key', 'value') を使用して、サーバーから送信されたデータをクライアントのローカルに保存できます。保存する前にデータを変換することを忘れないでください。

LocalStorage と SessionStorage アプリケーションの例

以下は私が実際に開発しているアプリケーションです。先ほど、JsonResponse を通じてフロントエンドに JSON データを送信しました。このデータには、data (ユーザーが要求したデータ)、token (サーバーによって生成されたトークン)、code (バックグラウンドで処理されたステータス コード) が含まれていました。このデータを受け取った後、フロントエンドはデータを処理し、コードの戻りが成功したかどうかを判断します。成功した場合は、データを解析してローカルに保存し、そうでない場合はアクセスが失敗します。

ここでは、localStorage と sessionStorage を使用して、それぞれ 2 つのデータを保存します。LocalStorage はカスタマイズされており、sessionStorage はバックグラウンドから取得されています。ブラウザの開発者ツールを開きます。Application では、Storage の下にある localStorage と sessionStorage に保存した対応する値を見つけることができます。

これで、vue の LocalStorage と SessionStorage の違いと使用方法についての記事は終了です。vue の LocalStorage と SessionStorage に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。