html5 sessionStorage会话存储_动力节点Java学院整理


Posted in HTML / CSS onJuly 06, 2017

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

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

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

特点

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

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

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

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

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

浏览器最小版本支持

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

适合场景

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

属性

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

方法

string sessionStorage.key(int index) :返回当前sessionStorage 对象的第index序号的key名称。若没有返回null。 stringsessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。 voidsessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。 voidsessionStorage.removeItem(string key) :将指定的键名(key)从sessionStorage 对象中移除。 voidsessionStorage.clear() :清除sessionStorage 对象所有的项。

存储数据

采用setItem()方法存储

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

通过属性方式存储  

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

读取数据

通过getItem()方法取值

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

通过属性方式取值

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

存储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

以上所述是小编给大家介绍的html5 sessionStorage会话存储,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 #HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 #HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 #HTML / CSS
HTML5中视频音频的使用详解
Jul 07 #HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 #HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 #HTML / CSS
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue实现div拖拽互换位置
2020/07/29 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
react实现同页面三级跳转路由布局
2019/09/26 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
简单了解python单例模式的几种写法
2019/07/01 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python多线程正确用法实例解析
2020/05/30 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
CAD实训总结范文
2015/08/03 职场文书
珍爱生命主题班会
2015/08/13 职场文书
文明礼貌主题班会
2015/08/14 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python