1. HTTP

HTTPはサーバとクライアントがデータを交換するプロトコルである.
Webサービスの場合は、ユーザーを識別して何をするか(推奨をカスタマイズしたり、カートをメンテナンスしたりするなど)が必要です.
HTTPは無状態プロトコルであるため,ユーザを識別したり一時データを格納したりするための状態管理が必要である.
HTTPにおける無状態とはどういう意味ですか?

通信終了後に状態を保持しない特徴.

接続が切断されると、クライアントとサーバの通信は終了し、ステータス情報を保持しない特性を有する.

2. Cookie

HTTP通信により交換データブロック

クライアントを識別するための

が一時的に格納されたセッションクッキー(セッションクッキー)と、ディスクに格納された永続クッキー(持続クッキー)がある.

2-1. Cookie使用例

セッション管理:サーバに格納するログイン、カート、スコア

が必要である.

パーソナライズ:ユーザーテーマ

追跡:ユーザー行動記録、分析

2-2. Cookieの欠点

容量制限:ドメインあたり20個、ドメインあたり4 KBのデータストレージ制限.

セキュリティ・ホール:暗号化されていない場合に交換されるため、勝手に変更またはブロックされやすい.

3. Web Storage

HTML 5以降のWebストレージ(以前はCookieのみ)

非HTTP通信のリポジトリ

Secretモードで

を実行しない

3-1. セッションストレージとローカルストレージの比較

セッションの比較StorageLocal Storage破棄セッションの終了時に破棄をクリアしない限り、永続的な保存範囲のセッション(同じラベル)ドメイン内にセキュリティ上の問題が残っています.使い捨てログを使用して検証されていないデータを使用します.

3-2. あんぜんもんだい

ローカルストレージはディスクに格納されるため、Webブラウザが閉じてもディスクにデータが保持されます.データを消去するためのプログラムが開発されていても、Webブラウザが正常にオフになっていなければ、データが削除されない可能性があるため、セキュリティ問題のデータを格納する際には、セキュリティ問題を解決するための対策を講じなければならない.
多くの参考資料に共通の説がある.Cookieにもセキュリティの問題があり、Webストレージは依然としてセキュリティが悪い.
要するに、機密データは、ローカルストレージのみを使用するのではなく、暗号化によって格納されるべきであり、タブ内でのみ使用可能なセッションストレージを使用することが望ましい.

3-3. ローカルストレージの使用方法

(1)導入

// Local Storage에서 userData로 저장된 정보를 가져온다.
JSON.parse(localStorage.getItem('userData'));

(2)保存

// Local Storage의 userData라는 이름으로(key)
// updatedData를 저장한다.(value)
const updatedData = {[id: 1, name: 'jelly'], [id: 2, name: 'brown']};
localStorage.setItem('userData', JSON.stringify(updatedData));

（3）複数種類の記憶方式

valueを1つだけ保存

key name : value yujin

使いやすい時は

を使う

ex) 토큰 , 이름

単純な配列としてvalueを保存する

key productId : value [ 355, 211, 393, 2, 50 ]

リスト内の特定の値(+更新)のみを格納場合は

である.

ex) 조회 이력

オブジェクト配列としてvalueを保存する

key data : value [ { id: 1, name: 'yujin' }, { id: 2, name: 'coffee' } ]

複数のリスト内の単一の情報を格納更新する必要がある場合、

.

ex) 상품 정보 + a 기록 필요시

Reference

HTTP完全ガイド、「クライアント識別とCookie」、305 p
HTTPとNetwork Basic,「Cookieを使用した管理状態」,58 p
「Cookieとセッション」https://devuna.tistory.com/23
MDN, "Web Storage API", https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
Webプラザ、「HTML 5 Webストレージ」、https://inswave.com/confluence/pages/viewpage.action?pageId=9667510
"Web Storage!", https://kamang-it.tistory.com/entry/Web%EC%A1%B0%EA%B8%88-%EB%8D%94-%EC%9E%90%EC%84%B8%ED%9E%88cookie%EB%8A%94-%EB%84%88%EB%AC%B4-%EA%B5%AC%EC%8B%9D%EC%95%84%EB%83%90-%EC%9D%B4%EC%A0%9C%EB%B6%80%ED%84%B4-Web-Storage