はじめに
ブラウザで保存出来る情報、以下３点の違いについて簡単にまとめました。
- Cookie
- localStorage
- sessionStorage
環境
OS: macOS Catalina 10.15.3
Chrome: 78.0.3904.108（Official Build） （64 ビット）
結論：比較表
| Cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 保存容量 | 4KB | 10MB | 5MB |
| 対応ブラウザ | HTML4/HTML5 | HTML5 | HTML5 |
| ブラウザのどこで有効か | どこでも | どこでも | 同じタブ内 |
| 有効期限 | 任意設定 | 基本は消えない | タブを閉じたとき |
| 保存される場所 | ブラウザとサーバー | ブラウザのみ | ブラウザのみ |
| HTTPリクエストで送信 | される | されない | されない |
特記事項
-
Cookieの容量は4KBと小さい
HTTPリクエストでヘッダとしてブラウザからサーバーに送信されるため、容量が大きいとパフォーマンスに影響が出てしまう -
CookieであればHTML4でも対応出来る。つまり、古いブラウザにも対応出来る
-
localStorageとsessionStorageは保存期間が長い方がいいか、短い方がいいかで使い分ける
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです