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五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
解析php常用image图像函数集
2013/06/24 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP 断点续传实例详解
2017/11/11 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
window.open的功能全解析
2006/10/10 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python如何实现代码检查
2019/06/28 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
python爬虫请求头设置代码
2020/07/28 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
自我评价的正确写法
2013/09/19 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
施工安全责任书
2014/04/14 职场文书
本科生就业推荐信
2014/05/19 职场文书
2015年见习期工作总结
2014/12/12 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
数据库连接池
2021/04/06 MySQL
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js
vue里使用create, mounted调用方法
2022/04/26 Vue.js