cookieとは
-
有効期限を指定できる
-
容量すくない、４KB
-
別々のタブで開いていても情報は共有される
- Q.前回みた商品の情報が広告で上がってくるのってここに入っている情報をみてるのか
-
アプリケーション側ではリクエストヘッダに入っている
Cookieを受け取ったあとでも、Cookieを受け取ったサーバとは異なるWebサーバに対してはCookieを送らない。(意図しない情報がほかのWebサーバーに送られるのを防ぐ)
session
- javascriptから操作することはできない
web storageとは
- cookieよりも保存できる容量が多い
- keyとvalueで値を保持
- 2種類ある
- sessionStorage
- ウィンドウやタブ単位で開いている間のみ保持されるデータ
- 別windowで開いていても共有されない
- Q.ログイン系の状態はここではないのね、じゃぁどこにはいってるの？
- localstorage
- オリジン単位でデータを永続的に保存するストレージ
- 別windowでも共有される
- ブラウザを閉じても消えない
- sessionStorage
localStorageでは、ローカル環境に5MBまでのデータを永続的に保存でき、 ユーザーのアクセスの度にデータがサーバーに送信されることがありません。 ウェブメールの例で言えば、localStorageなら送受信データをローカル環境に保存でき、 オフラインウェブアプリケーションと組み合わせることで、オフラインでのメール閲覧なども可能となるでしょう。
Q,gmailはインターネットが切れてもメールを見ることができるのはローカルストレージに情報をためているからか?
web storageに対してできること
- 取得
- セット
- 削除
- 全部削除
web storageのイベント
データの追加、上書き、削除、全部削除を行うとstorageイベントが発火するそう
そのときにとれる情報が
- key:更新されたkey名
- oldValue:古いvalue
- newValue:新しいvalue
- url: keyが更新された文書のURL
- storageArea：更新によって影響を受けたStorageオブジェクト
最後の2つが不明。
web storageのまとめ
- 1オリジン ５MBと情報が多い
- keyとvalueで値を持てる
- sessionStorageはタブやウィンドウ毎に違う情報持てる
- localStorageはオリジン単位で永続的に情報を持てる
これよりsessionStorageは会員登録STEP1~3のように段階的に情報を入力するなど、限定的な状態の持ち回しを行う場面での活躍ができる。こういった場合は別のタブやwindowへ影響を及ぼすべきでないため。
Q,セキュリティ的にはこのように扱うことによる問題はあるのか？
localStorageは、オリジン単位でデータを永続的に保持することができる、ので思いつくのはeコマースの「カート」機能だった。
カートに入れっぱなしにしておいて購入したらlocalstorageの値を消すという風にできるか。
ただそれだと、ログインアカウントを変更しても同じ情報が入ってしまうか。
gmailだけなのか？もっと身近に使われる場面に遭遇するんじゃないか？
Q,localStorageはどのような場面で使われているのか？
オリジンとは
プロトコル://ドメイン:ポートのこと
Q,CORS クロスオリジンリソースシェアリングってなんだ