40
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

【JavaScript】Cookie , localStorage, sessionStorageの違い

はじめに

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

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

おわりに

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
40
Help us understand the problem. What are the problem?