【JavaScript】Cookie , localStorage, sessionStorageの違い

3250 ワード
sessionStorage JavaScript 初心者 cookie localStorage JavaScript テキストリンク

はじめに

ブラウザで保存出来る情報、以下３点の違いについて簡単にまとめました。

  • 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は保存期間が長い方がいいか、短い方がいいかで使い分ける

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）