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

客户端存储

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

永久性存储:如localStorage。

结构化存储:如indexedDB。

会话级存储:如sessionStorage。

什么是会话级客户端存储

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

为什么会有会话级存储

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

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

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

两种会话级存储的区别

那么这样一来就同时存在了两种会话级别的存储——sessionStoragesession 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浏览器,也包括手机端微信浏览器。所以要求前端开发要多加留心注意。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-11-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

客户端会话级存储:session Storage与session Cookie的区别

2404
来自专栏流柯技术学院

centos6配置vnc登录远程物理机及vb复制vdi启动虚拟机网络问题

2、启动VNC服务 # vncserver You will require a password to access your desktops. Passw...

1792
来自专栏数据之美

使用 django-blog-zinnia 搭建个人博客

django-blog-zinnia 虽然小巧,但是具备了个人博客应用的全部基础功能,且具有很高的拓展性,并且开箱即用。以下是官方列出的一些特性: 评论 站...

3329
来自专栏Youngxj

QQ红包 1.0.7-xp框架

2822
来自专栏Golang语言社区

gRPC服务发现&负载均衡

构建高可用、高性能的通信服务,通常采用服务注册与发现、负载均衡和容错处理等机制实现。根据负载均衡实现所在的位置不同,通常可分为以下三种解决方案:

8252
来自专栏菩提树下的杨过

JMS + jboss EAP 6.2 示例

.Net中如果需要消息队列功能,可以很方便的使用微软自带的MSMQ,对应到Java中,这个功能就是JMS(Java Message Service). 下面以J...

2727
来自专栏菩提树下的杨过

ActiveMQ笔记(6):消息延时投递

在开发业务系统时,某些业务场景需要消息定时发送或延时发送(类似:飞信的短信定时发送需求),这时候就需要用到activemq的消息延时投递,详细的文档可参考官网说...

4235
来自专栏程序员的SOD蜜

使用“消息服务框架”(MSF)实现分布式事务的三阶段提交协议(电商创建订单的示例)

1,示例解决方案介绍 在上一篇 《消息服务框架(MSF)应用实例之分布式事务三阶段提交协议的实现》中,我们分析了分布式事务的三阶段提交协议的原理,现在我们来看看...

3379
来自专栏mySoul

localStorage sessionStorage

大文档 https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

2333
来自专栏IMWeb前端团队

WebWorker简介

本文作者:IMWeb rakuluo 原文出处:IMWeb社区 未经同意,禁止转载 为 JavaScript引入线程技术 不必再用 setTime...

2158

扫码关注云+社区

领取腾讯云代金券