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 仅仅是为 了在本地“存储”数据而生。

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