阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      cookies,sessionStorage,localStorage 的区别

      共同点

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

      • 大小区别
        • 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 过期时间之前一直有效,即使窗口或浏览器关闭

      更多操作参考

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录