开发者社区> 好程序员> 正文

好程序员前端教程之HTML5中的storage 如何使用

简介: HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享,对storage的概念及用法应该都能掌握个七七八八了。
+关注继续查看

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相关内容及其使用方法,如果大家在前端开发中,需要实现上述功能,不妨可以试试上述方法。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【芯片前端】以vcs编译环境为例做一个适用于芯片前端的极简版Makefile实操教程
【芯片前端】以vcs编译环境为例做一个适用于芯片前端的极简版Makefile实操教程
50 0
前端入门ArcGIS教程(一)(下)
本文适合对图形、地图、可视化感兴趣的小伙伴阅读。
54 0
前端入门ArcGIS教程(一)(上)
本文适合对图形、地图、可视化感兴趣的小伙伴阅读。
107 0
使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!(下)
使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!
94 0
使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!(上)
使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!
104 0
Vue视频 | 【Vue2 + Vue3 前端教程】完整版
目前大部分公司还是以vue、react技术为主的,而Vue中还是以Vue2为主流,但不可否认Vue3是未来所必须的且已有这个趋向了 今天给大家介绍一个Vue的教程 里面既有现在主流的Vue2 同时也存在Vue3教程 每个教程里面都有视频 以及配套资料(代码,讲义ppt,学习计划)
63 0
前端:给新手看的 React Hooks 教程
  "Hooks 到底是个啥玩意儿???"   你是不是有这样的疑惑?在你自认为已经了解了差不多 React 所有的内容的时候,Hooks 就这么出现了。   这就是前端开发人员的日常,技术从未停止更新。
63 0
前端Vue项目打包部署实战教程
前言 在前后端还没有分离的时代下,前端项目通常时放在后端项目的静态资源目录下一起部署的,那个时候并没有专门的前端程序员,或者也可以说前端程序员不需要自己部署网站。通常前端人员只需要把网站源文件如.html文件结尾的资源包发给后端或者运维即可,剩下的事便交给后端或运维搞定了。 但是前后端分离开发后,前后端项目也通常分离部署了,这个时候可能就需要前端人员自己部署前端项目,然后前端人员可能很少接触到服务器等知识,所以部署网站时总是捉襟见肘。 这边文章主要就是讲解如何将一个前端项目部署到服务器,并且外网可以访问,前端项目就以Vue项目为例。
815 0
前端本地存储数据库IndexedDB完整教程
前言 在人们的印象中,可能觉得只有做后端的小伙伴才会接触到数据库。其实在前端的领域里面也有数据库,只是可能用的比较少,因为前端存储方案有很多,比如cookie、sessionstorage等等。 在浏览器上有两种数据库:webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库,webSQL基本上已经废弃了,具体原因小伙伴可以下来自己查查,今天主要就讲解Indexed DB数据库的使用。
751 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载