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制作的20种loading动效
Jul 05 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
html5用video标签流式加载的实现
May 20 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
再说下636单管机
2021/03/02 无线电
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
js仿微信抢红包功能
2020/09/25 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
深入浅析Python中的迭代器
2019/06/04 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
新媒传信软件测试面试题
2013/02/24 面试题
自我鉴定四大框架
2014/01/17 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
医学生求职信
2014/07/01 职场文书
离婚协议书范本样本
2014/08/19 职场文书
教师党员承诺书2015
2015/01/21 职场文书
个人催款函范文
2015/06/24 职场文书