客户端会话级存储:session Storage与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-08-10

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大魏分享(微信公众号:david-share)

用Ansible自动供应vmware虚拟机--构建数据中心一体化运维平台第二篇

1.1 简述 一直以来,打开邮箱被ticket糊一脸的事情时有发生。我一直在想,能不能以一种简单的方案(不花老板的钱)来供应(provisioning)虚拟机呢...

6602
来自专栏数据之美

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

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

3029
来自专栏知识分享

9-开发板接入小五物联实现远程控制(Wi-Fi模块)

这一节为教程最终版功能演示,现在不必深究,早晚自己全部都会实现的(静静的跟着我学哈)

1832
来自专栏Youngxj

QQ红包 1.0.7-xp框架

2292
来自专栏Seebug漏洞平台

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

来源:BypassingXSSFiltersusingXMLInternalEntities 原作者:DavidLitchfield (david@davidl...

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

JMS + jboss EAP 6.2 示例

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

2487
来自专栏前端学习心得

浏览器存储

1315
来自专栏ccylovehs

JavaScript跨域解决方式

平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种:

1982
来自专栏Golang语言社区

gRPC服务发现&负载均衡

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

6552
来自专栏Brian

Mac 配置终端环境

Mac 配置终端开发环境 ---- 概述 作为一个服务端开发人员基本上都是通过终端和服务器打交道,所以一个好个开发人员那么他的终端配置也是高效的。“工欲善事必先...

42711

扫码关注云+社区