客户端存储
在前端开发中,客户端的缓存有多种,根据应用场景的不同可以分为:
永久性存储:如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浏览器,也包括手机端微信浏览器。所以要求前端开发要多加留心注意。