当前位置:首页 / 网页制作 / HTML/Xhtml教程 / 深入了解HTML5之sessionStorage对象
深入了解HTML5之sessionStorage对象
芯晴素材特效 分类:HTML/Xhtml教程 发布日期:2018-05-09

这篇文章介绍的内容是深入了解HTML5之sessionStorage对象,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

HTML5 sessionStorage会话存储

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()方法存储

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

3.1.2 通过属性方式存储

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

3.2 读取数据

3.2.1 通过getItem()方法取值

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

3.2.2 通过属性方式取值

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

3.3 存储Json对象

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

1
2
3
4
5
6
7
8
9
10
11
12
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

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jq hover鼠标滑过动画导航条

2017-03-17   浏览:479

内容倾斜幻灯片Tilted Items

2017-02-27   浏览:460

强制打开QQ聊天窗口的代码

2013-01-03   浏览:8432

CSS3鼠标滑过渐变颜色旋转图标特效

2017-03-09   浏览:309

跟随鼠标的JS时钟

2012-12-31   浏览:8182

跟随鼠标的幻影文字效果

2013-01-08   浏览:9057

回到顶端插件ScrollUp

2017-03-18   浏览:374

html5仿手机QQ拆红包游戏网页下载

2017-03-13   浏览:491

jQuery图片新闻组图幻灯切换网页下载

2017-03-13   浏览:368

网易时尚图片循环特效

2017-03-09   浏览:193

css3高版本浏览器下垂直文字放大镜效

2017-03-09   浏览:165

jQ带日期区间日期选择插件

2017-03-14   浏览:392