sessionStorage、localStorage、cookie的缓存

在Web浏览器中，sessionStorage、localStorage和cookie都可以用来缓存数据。但是他们在使用中有啥区别呢

• sessionStorage:
  仅在当前浏览器会话期间有效,关闭窗口或标签页时会消失.同时,每个标签页、窗口、框架都有自己的sessionStorage存储空间,他们之间是相互独立的.本质上来说,sessionStorage的存储是临时缓存,不能长久保存.

• localStorage:
  除非主动删除,否则将长久保存,即使关闭浏览器.同时,同源的窗口、标签、框架都可以共享localStorage中的数据.

• cookie:
  可以设置一个过期时间,在这个时间之前数据都有效.默认情况下,cookie在关闭浏览器时失效.同源的所有窗口、标签页、子域都可以共享cookie（只要没设置SameSite属性为Strict或Lax）。

sessionStorage、localStorage和cookie生命周期

1、sessionStorage: 临时的会话存储

只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面，或者在编辑器中更改了代码，存储的会话信息也不会丢失。

2、localStorage: 永久存储

**会一直将数据存储在客户端的储存方式，除非手动清除.**即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清除的数据

3、Cookie:

cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上

按照以上区别总结:

1、不同浏览器无法共享localStorage和sessionStorage的值。

2、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage，Cookies值，通过跳转的页面可以共享sessionStorage值。

3、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式：

(1)  跳转    //原窗口

(2) 跳转  //新开窗口

(3) window.location.href = '同源页面'      //原窗口

(4) window.location.replace('同源页面')   //原窗口

(5) window.open('同源页面')       //新开窗口

(6) this.$router.push({path: '同源页面'})   //通过路由跳转共享值
1
2
3
4
5
6
7
8
9
10
11

app端通过原生方法更换webView实现跳转，这种方式不能共享sessionStorage，原窗口跳转的页面传递sessionStorage，改变存储值会相互影响，新开窗口跳转方式传递sessionStorage，改变存储值互不影响