Web存储

Web存储

​ Web存储是将数据存储到用户的电脑上，这样可以缓解服务器的压力，并且提高体验。Web存储分为两种，sessionStorage和localStorage

1.sessionStorage

（1）生命周期为关闭当前页面窗口

（2）不能多窗口下数据共享（通过页面跳转则可以）

2.localStorage

（1）永久生效，除非手动删除或代码删除

（2）可以多窗口共享

3.方法

​ setItem(key,value) 设置存储内容

​ getItem(key) 读取存储内容

​ removeItem(key) 删除键值为key的存储内容

​ clear() 清空所有存储内容

​ key(n) 以索引值来获取键名

​ length 存储的数据的个数

4.cookie、sessionStorage和localStorage区别

​ cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，cookie只在设置的cookie过期时间之前一直有效。作用域不同，sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

相同点：

都是存储数据，存储在web端，并且都是同源

不同点：

（1）cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽
（2）session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多
（3）session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间
（4）cookie 和local都支持多窗口共享，而session不支持多窗口共享。但都支持a链接跳转的新窗口