Js中cookies、sessionStorage和localStorage的区别

sessionStorage、localStorage和cookie都是用来存储用户数据的方式,

sessionStorage和localStorage是HTML5 Web StorageAPI中提供的,可以方便的在web请求之间保存数据,有了本地数据,就可以避免数据在浏览器和服务器之间不必要的来回传递,sessionStorage,localStorage和cookie都是保存在浏览器端,且同源的。

1.sessionStorage和localStorage的区别

sessionStorage从字面上的意思:会话储存来看,session中的数据只有在同一个会话的页面中才能访问。并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而 localStorage(本地存储) 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

2.web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似,区别是它是为了更大容量存储设计的。

Cookie的大小是受限的,cookie数据不能超过4k,并且每次你请求一个新的页面的时候 Cookie 都会被发送过去,这样无形中浪费了带宽,另外 cookie 还需要指定作用域,不可以跨域调用。sessionStorage和localStrage虽然也有存储大小的限制,但是比cookie大得多,可以达到5M或更大。

cookie在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口和浏览器关闭也一直保存,因此用作持久数据的保存。

cookie 数据始终在同源的http请求中携带,即cookie在浏览器和服务器之间来回传递。而sessionStorage不会自动把数据发给服务器,仅在本地保存。

sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面,localStorage在所有同源窗口中都是共享的,cookie也是在所有的同源窗口中都是共享的。 Web Storage支持事件通知机制,可以将数据更新的通知发送给监听者,但是Web Storage的api 接口使用更加方便!

除此之外,WebStorage 拥有 setItem,getItem,removeItem,clear 等方法,不像 cookie 需要前端开发者自己封装 setCookie,getCookie。但是Cookie 也是不可以或缺的:Cookie 的作用是与服务器进行交互,作为HTTP 规范的一部分而存在 ,而 Web Storage 仅仅是为 了在本地“存储”数据而生。

希望以上内容对您有所帮助。我也是边学习边总结,如有不完善的地方还望大家到留言区批评指正。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180516G0RFQL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券