Angular 6 localStorage および sessionStorage カプセル化

クズども · 掲載地 2018/10/23 10:37:13

前景のページはデータベースにデータを保存する必要はなく、次のページにデータを渡す必要があります。ここで一時的なデータの保存が役立ちます。フロントエンドでのキャッシュの利用。

類似点:

1. 関数は同じで、sessionStorageとlocalStorageはどちらもクライアント上の一時情報を保存するためのオブジェクトです。

2. ストレージコンテンツタイプ:どちらも文字列タイプのデータを保存します。

3. データ保存操作:キー-値、操作の使用は同じです。

違い:

ライフサイクル:

1. sessionStorage:ライフサイクルは現在のウィンドウまたはタブで、ウィンドウやタブが閉じると、sessionStorageに保存されたすべてのデータは空になります。セキュリティ上の理由からはsessionStroageの使用が推奨されます。

（
1) 相同的な政策制限。異なるページ間で同じセッションストレージを操作するには、同じプロトコル、同じホスト名、同じポートのもとでなければなりません。 (IE8と9は同じホスト名のみをベースにデータを保存し、プロトコル(HTTPやHTTPS)やポート番号の要件は無視します)

2) 単一タブの制限、シングルページタブでは、異なるURLアドレスにアクセスできます! こちらがシングルタブの制限です。 sessionStorage操作は単一のタブに限定され、sessionStorageのデータはこのタブ内の同じページにアクセスすることで共有できます。

3) 店舗のみを地元に保管すること。 seesionStorageのデータはHTTPリクエストとともにサーバーに送信されるわけではなく、ローカルでのみ有効となり、タブを閉じた後にデータを消去します。 (Chromeのリカバリータブ機能を使うと、seesionStorageのデータも復元されます。)

4) 保管方法 seesionStorageはキーメソッドと値メソッドを使用します。値が文字列型でなければならず(非文字列の入力も保存時に文字列に変換されます)。真値は「真」に変換されます。

5) ストレージ制限:ブラウザによってストレージ制限は異なりますが、ほとんどのブラウザは上限を5MB未満に制限しています。

アクセス可能http://dev-test.nemikor.com/web-storage/support-test/ブラウザのストレージ制限をテストしてください。
）

2. localStorage:ライフサイクルは恒久的であり、ユーザーがブラウザが提供するUI上のlocalStorage情報を明示的にクリアしない限り、その情報は永遠に存在します。

情報共有:

異なるブラウザはlocalStorageやsessionStorageの情報を共有できません。同じブラウザ内のページは同じlocalStorageを共有することができます(ページは同じドメイン名とポートに属します)が、sessionStorageの情報は異なるページやタブ間で共有できません。ページやタブはトップレベルのウィンドウに過ぎず、もしタブに複数のiframeタグが含まれていて同じページに属している場合、それらの間でsessionStorageを共有することができる点に注意が必要です。

local.storage.ts ソースコード:

ログインが見えます。

session.storage.ts ソースコード

ログインが見えます。

ファイルapp.module.tsで参照されています

ログインが見えます。

コンポーネントでの使用

ログインが見えます。

[角] Angular 6 localStorage および sessionStorage カプセル化

関連記事

閲覧したセクション