同样是客户端会话级存储，sessionStorage和session cookie有什么？

客户端存储

在前端开发中，客户端的缓存有多种，根据应用场景的不同可以分为：

永久性存储：如localStorage。

结构化存储：如indexedDB。

会话级存储：如sessionStorage。

什么是会话级客户端存储

所谓会话级别存储，就是说在关闭标签时（有时是浏览器关闭后）数据就会被清除掉

为什么会有会话级存储

会话级存储类似于人们之间的对话，它是一种上下文关系的延续。比如，小张问小马“你认识张晓松吗？” 小马回答“认识。”小张再问“他都写过哪些歌啊？”。此时，如果没有上下文的话，问题中的“他”便没人能知道指的是谁了，而在会话级存储恰好解决了这个问题。

而对于我们常用到的cookie存储来说，如果有效期（expires）没有设定的话，默认也是会话级。

以淘宝网的cookie为例，下图中红色框内的就是会话级别的cookie

两种会话级存储的区别

那么这样一来就同时存在了两种会话级别的存储——sessionStorage和session Cookie。

虽然都是会话级存储，但是二者还是有很多不同的。

最根本的区别就是作用域不同。

对于sessionStorage

在浏览器中每次打开一个标签就是建立一个独立的会话，所以每个标签页的sessionStorage是独立封闭的，不可以相互访问。

对于session Cookie

会话是建立与整个浏览器进程，即浏览器进程关闭后才能消失，并且各个标签页是可以相互访问的

可以用以下代码进行验证：

页面A在打开后，分别向sessionStorage和cookie中写值；

页面B在打开后，分别读取sessionStorage和cookie中的值；

a.html的代码

b.html的代码

验证1

在页面A中打开页面B时，运行结果如下，可以看出sessionStorage的值和cookie的值都被正确的读取出

验证2

在页面A打开后，在新建标签中打开页面B，运行结果如下，可以看到sessionStorage没有读取到值，而cookie正常。

以上运行结果充分证明了sessionStorage是不可以跨标签访问的，而session Cookie是可以的。

PS：需要补充说明的是，当在页面A中在a标签中通过target来在新标签中打开页面B时，整个会话是可以延续的，运行结果如下：

除了跨标签访问的问题外，session Cookie还有另一个特点。

由于是session Cookie的会话级是建立与整个浏览器进程的，而又由于现在的大部分浏览器即使在退出后进程仍然没有关闭，所以导致session Cookie的会话级存储被超预期的延长了。这其中包括PC端的chrome浏览器，也包括手机端微信浏览器。所以要求前端开发要多加留心注意。