cookies,sessionStorage,localStorage 的区别

共同点

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

cookie 与 localStorage 的区别

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

sessionStorage 和 localStorage

• localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
• sessionStorage 存储的数据在浏览器关闭后自动删除

cookie 与 sessionStorage 和 localStorage

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

更多操作参考

• JavaScript Cookie
• HTML5 Web 存储

更多面试题

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

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