sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。

目录

1. 介绍

  1.1 说明

  1.2 特点

  1.3 浏览器最小版本支持

  1.4 适合场景

2. 成员

  2.1 属性

  2.2 方法

3. 示例

  3.1 存储数据

  3.2 读取数据

  3.3 存储Json对象

1. 介绍

1.1 说明

sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

1.2 特点

1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)

2) 单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下

可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。

1.3 浏览器最小版本支持

支持sessionStorage的浏览器最小版本:IE8、Chrome 5。

1.4 适合场景

sessionStorage 非常适合SPA(单页应用程序),可以方便在各业务模块进行传值。

2. 成员

2.1 属性

 readonly int sessionStorage.length :返回一个整数,表示存储在 sessionStorage 对象中的数据项(键值对)数量。

2.2 方法

 string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

 string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

 void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

 void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。

 void sessionStorage.clear() :清除 sessionStorage 对象所有的项。

3. 示例

3.1 存储数据

3.1.1 采用setItem()方法存储

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 通过属性方式存储  

sessionStorage['testKey'] = '这是一个测试的value值';

  

3.2 读取数据

3.2.1 通过getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 通过属性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值

3.3 存储Json对象

sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。

var userEntity = {
name: 'tom',
age: 22
}; // 存储值:将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity)); // 取值时:把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
End
菜单加载中...

HTML5 sessionStorage会话存储的更多相关文章

  1. Token和SessionStorage(会话存储对象)

    sessionStorage数据只在当前标签页共享 存在本地   关闭浏览器后会清除数据(关闭标签页不会清楚) localStorage数据会存在浏览器中  浏览器关了数据也还在 只有清除缓存才会消失 ...

  2. localStorage(本地存储器)、sessionStorage(会话存储)

      设置:localStorage.setItem("token", JSON.parse(res).data.token);   获取:that.token = localSto ...

  3. HTML5 LocalStorage 本地存储,刷新值还在

    H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...

  4. 偏前端-HTML5 sessionStorage-会话存储

    sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.本篇主要介绍 sessionStorage(会话存储) ...

  5. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  6. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  7. python爬虫遇到会话存储sessionStorage

    记录一次爬虫生成链接过程中遇到的sessionStorage存储数据 1.简介 sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标 ...

  8. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  9. 会话存储sessionStorage

    会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的).我们通过全局sessionStorage访问会话 ...

随机推荐

  1. js判断窗体或容器滚动条到底部

    NO1---jquery判断窗体滚动条到底部 $(window).scroll(function () {if ($(window).scrollTop() >= $(document).hei ...

  2. 【C#】【Thread】Barrier任务并行

    Barrier  是一个对象,它可以在并行操作中的所有任务都达到相应的关卡之前,阻止各个任务继续执行. 如果并行操作是分阶段执行的,并且每一阶段要求各任务之间进行同步,则可以使用该对象. --MSDN ...

  3. Oracle常用操作——创建表空间、临时表空间、创建表分区、创建索引、锁表处理

    摘要:Oracle数据库的库表常用操作:创建与添加表空间.临时表空间.创建表分区.创建索引.锁表处理 1.表空间 ■  详细查看表空间使用状况,包括总大小,使用空间,使用率,剩余空间 --详细查看表空 ...

  4. property内存管理策略

    1普通数据,用weak 2delegate,用weak 3一般对象,用strong 4NSString,用copy 5block,用copy

  5. C# 字符编码类Encoding

    在网络通信中,很多情况下都是将字符信息转成字节序列进行传输.将字符序列转为字节序列的过程称为编码.当这些字节传送到接收方,接收方需要逆向将字节序列转为字符序列.这个过程就是解码. 常见编码有ASCII ...

  6. cvc-complex-type.2.4.c: The matching wildcard...

    在家里的电脑好好的,在单位的就不行,需要把web app libraties提到 最前面,然后clean一下项目

  7. ES6新语法

    ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...

  8. Java基础知识总结--多态

    面向对象编程的三大特性:封装.继承.多态 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据,而外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承是 ...

  9. 18.1 volatile的作用

    volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 1.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一 ...

  10. mysql批量插入数据

    建表 create table `dept`( `id` ) unsigned NOT NULL AUTO_INCREMENT, `deptno` mediumint() unsigned ', `d ...