cookies,sessionStorage,localStorage 的区别

🌙
手机阅读
本文目录结构
a'xi'he

共同点

都是保存在浏览器端,且同源的

  • 大小区别
    • cookie 支持的数据内容小,8k 左右。localStorage 目前能支持到 10M.
    • cookie 不能跨域访问,作为 http 请求的一部分,无意中增加带宽。
    • localStorage 本地持久化。
  • 使用区别
    • Web Storage 拥有 setItem,getItem,removeItem,clear 等方法
    • 不像 cookie 需要前端开发者自己封装 setCookie,getCookie。

sessionStorage 和 localStorage

  • localStorage 适用于长期存储数据,浏览器关闭后数据不丢失
  • sessionStorage 存储的数据在浏览器关闭后自动删除
  • cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间来回传递。
  • 而 sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
  • cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下。

总结如下

  • cookie 在浏览器和服务器间来回传递。
  • sessionStorage 和 localStorage 不会
  • sessionStorage 和 localStorage 的存储空间更大;
  • sessionStorage 和 localStorage 有更多丰富易用的接口;
  • sessionStorage 和 localStorage 各自独立的存储空间;


下面是另外一种参考

经典的总结

  • cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
  • cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
  • sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。

存储大小

  • cookie 数据大小不能超过 4k。
  • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

有期时间

  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭

更多操作参考

更多 HTML 面试题

如果你先了解更多的 HTML 面试题,

请点击 HTML面试题

这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang