HTML5中的storage如何使用

本篇内容介绍了“HTML5中的storage如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

10年积累的成都做网站、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有沂南免费网站建设让你可以放心的选择与我们合作。

HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?

其实,storage是个很简单的东西,只要熟悉JavaScript中对象的,看完小编本文的分享,对storage的概念及用法应该都能掌握个七七八八了。

在HTML5中,你可以吧storage 想象成是储存在客户端(浏览器)中的一些 javascript 对象,那么有什么用呢?举个简单的例子,百度搜索会把你每次的搜索关键字用 storage(localStorage) 存储下来,那么下次你再搜索相同的内容的时候,它会优先将你曾经搜过的内容进行下拉展示。 关于 storage 的内容,可以用 chrome 下的 Resources 面板进行查看。

方法:

1、clear() 删除所有值。ff 没有实现

2、getItem(name) 根据指定的名字 name 获取对应的值

3、key(index) 获得 index 位置处的值的名字

4、removeItem(name) 删除由 name 指定的名值对

5、setItem(name, value) 为指定的 name 设置一个对应的值

也可以用点语法和方括号语法来访问设置,但是建议用上面的方法。除此之外,还需要注意的一点就是 value 必须是字符串 。

sessionStorage

顾名思义,sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭,或者更准确地说是保持到该页面标签关闭为止。对于同一个页面,在不同标签中打开,是拥有不同的 sessionStorage 对象的,而如果相同页面,刷新后,sessionStorage 对象也会重新开始。

// 设置

sessionStorage.setItem('name', 'maiziedu');

sessionStorage.age = '10';

// 读取

var name = sessionStorage.getItem('name'); // maiziedu

var age = sessionStorage.age; // 10

// 遍历

for (var i = 0, len = sessionStorage.length; i < len; i++) {

var key = sessionStorage.key(i);

var value = sessionStorage.getItem(key);

console.log(key, value);

}

// age 10

// name maiziedu

// 也可以用 for in

for (var key in sessionStorage) {

console.log(key, sessionStorage.getItem(key));

}

// 删除

delete sessionStorage.name;

sessionStorage.removeItem('age');

因为 sessionStorage 对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。

sessionStorage 对象主要用于仅针对会话的小段数据的存储,如果需要跨域会话存储数据,那么就要使用 localStorage 了。

localStorage

localStorage 和 sessionStorage 大抵相同。可以多页面访问同一个 localStorage 对象,但是页面必须来自同一域名(子域名无效),使用同一种协议,同一个端口(同源策略)。至于 localStorage 的使用方法,可以参考上面 sessionStorage 的使用。

Storage 事件

对 Storage 对象进行任何修改,都会在文档上触发 Storage 事件。当通过属性或 setItem() 方法保存数据,使用 delete 操作符或者 removeItem() 删除数据,或者调用 clear() 方法时,都会发生该事件。这个事件的 event 对象有如下属性:

1、domain 发生变化的存储空间的域名

2、key 设置或者删除的键名

3、newValue 如果是设置值,则是新值;如果是删除键,则是 null

4、oldValue 键被更改之前的值

遗憾的是,webkit(chrome)还不支持这个事件,尽管 IE8 以及 ff 支持其部分属性,但因为 chrome 的不支持,注定其到目前为止还无法广泛使用。

EventUtil.addHandler(document, 'storage', function(e) {

console.log(e.domain, e.key, e.newValue, e.oldValue);

});

“HTML5中的storage如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


名称栏目:HTML5中的storage如何使用
网站地址:http://bzwzjz.com/article/ijgjgc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 企业网站设计 网站制作 温江网站设计 成都品牌网站设计 高端网站设计推广 成都网站建设 成都网站建设公司 四川成都网站建设 成都网站制作 网站制作 重庆手机网站建设 成都网站建设公司 成都网站建设公司 上市集团网站建设 定制网站制作 网站制作公司 成都网站建设 定制级高端网站建设 盐亭网站设计 网站设计 app网站建设 成都网站建设