文档章节

HTML5 高级系列:web Storage 学前端开发要先看这个

小婧大神
 小婧大神
发布于 2017/04/26 10:54
字数 918
阅读 2
收藏 0
HTML5 高级系列:web Storage 学前端开发要先看这个 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。 localStorage 的数据保存在本地硬件上,可以永久保存,可以手动调用api清除数据。sessionStorage 保存在 session 对象中,会在浏览器关闭时被清除。 web Storage 的大小在浏览器上是有限制的,不同浏览器大小会有区别,在主流浏览器中,大小约为 5M,用来存储普通数据其实已经足够。 用法 更多的学习资源+web前端25群 找小洁老师 以localStorage 为例,sessionStorage用法一样: ​ setItem 保存数据:localStorage.setItem(key,value); 示例: localStorage.setItem('name','Hello World'); 当 key 相同时会覆盖之前的 value,用于修改数据。如果 value 为对象,需转为 json 字符串,否则你读取出来的将会是 [object Object] getItem 读取数据:localStorage.getItem(key); 示例: localStorage.getItem('name'); // Hello World removeItem 删除单个数据:localStorage.removeItem(key); 示例: localStorage.removeItem('name'); localStorage.getItem('name'); // null 删除 key 为 name 的数据后,loaclStorage 里已经获取不到该数据,则返回 null; clear 删除所有数据:localStorage.clear(); 示例: localStorage.clear(); 此时会把localStorage 中的所有数据都删除。 key 得到某个索引的key:localStorage.key(index); 示例: localStorage.setItem('name1','Hello World'); localStorage.setItem('name2','Hello Linxin'); localStorage.key(1); // name2 获取到索引为 1 的 key,即 name2。 构造函数 在实际项目中,可能需要多次对 localStorage 进行操作,我们可以通过一个构造函数来更好的操作。 示例: var localEvent = function (item) { this.get = function () { returnlocalStorage.getItem(item); } this.set = function (val) { localStorage.setItem(item, val); } this.remove = function () { localStorage.removeItem(item); } this.clear = function () { localStorage.clear(); } } // 使用new字符把构造函数实例化出多个对象 var local1 = new localEvent('name1'); var local2 = new localEvent('name2'); local1.set('Hello World'); local2.set('Hello Linxin'); local1.get(); // Hello World local2.get(); // Hello Linxin 这里只是简单的演示,像我们平时在项目中可能要把对象存储起来,就需要在代码里做些处理。 监听storage 事件 可以通过监听 window对象的 storage 事件并指定其事件处理函数,当页面中对 localStorage 或 sessionStorage 进行修改时,则会触发对应的处理函数。 window.addEventListener('storage',function(e){ console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue); }) 触发事件的时间对象(e 参数值)有几个属性: key : 键值。 oldValue : 被修改前的值。 newValue : 被修改后的值。 url : 页面url。 storageArea : 被修改的 storage 对象。 注意:在谷歌浏览器中,需要在不同标签页中修改 storage 才会触发该事件,即网页A 监听该事件,在网页B 中修改 localStorage,则网页A 会触发事件函数。但是在 IE 中,在同个网页修改 localStorage 都会触发该事件。 调试 谷歌浏览器自带调试工具(chrome devtools)非常好用,可以用来调试 localStorage 和 sessionStorage。打开浏览器按f12调出调试工具,可以看到 Application ,点击打开可以看到左边栏有 Storage,包括了 localStorage、sessionStorage、IndexedDB等,选中我们要调试的网站域名,可以看到右边有对应的 key 和 value,可以通过右键进行编辑或删除等。 兼容 IE8 以上就兼容,但是比较特别,需要在服务器上打开的才支持,直接双击打开文件的 file:// 是不兼容的。 到了 IE11 才支持 file:// 下打开的,其他浏览器的支持程度都很高,包括在手机上的兼容。

本文转载自:

共有 人打赏支持
小婧大神
粉丝 0
博文 77
码字总数 3758
作品 0
HTML5 高级系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。 localStora...

课工场CC老师
2017/10/26
0
0
小白零基础想入门web前端!?

很多童鞋都会问到这个问题,诸如: 我是小白,完全没有基础,怎样入门前端? 学前端都能做哪些岗位? 也会问到慕课网的《前端小白入门》路径课程靠谱吗? …………现在统一给大家解答一下。 ...

慕课网官方_运营中心
07/04
0
0
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
优博精选|2018互联网优秀博客推荐(持续更新)

前端开发 jQuery之家:jQuery之家致力于搜集和整理各种jQuery插件,jQuery特效,jquery ui,jQuery 教程,JS特效,网页特效,以及各种html5,css3动画和效果,为前端开发者提供最全面的网页开...

奋斗的小矿工
08/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

71.告警系统主脚本 配置文件 监控项目

20.20 告警系统主脚本(main.sh) 20.21 告警系统配置文件 20.22 告警系统监控项目 20.20 告警系统主脚本(main.sh): ~1.约定:把以后所有的shell脚本放在/usr/local/sbin下,也方便我们查...

王鑫linux
19分钟前
0
0
装饰者模式

装饰者模式 Q:何为装饰模式? ()地给一个对象添加一些额外的(),并且()时,并不影响原对象。扩展功能来说,装饰器模式相比生成子类更为灵活。 Q:使用场景? 1.想要在不影响其他对象的情况下...

阿元
39分钟前
0
0
GO 切片(slice)相关语法

package mainimport("fmt")func main() {var intArr [5]int = [...]int{1,2,3,4,5} //定义一个数组slice := intArr[2:4] //第二个(包含)下标到第四个下标(不包含)fmt.Println...

汤汤圆圆
41分钟前
0
0
活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
55分钟前
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部