html5本地存储localStorage实战(1)(转)
来源:互联网 发布:电子地图标注软件破解 编辑:程序博客网 时间:2024/06/14 18:30
web本地存储方案总结
本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用网上的一张图来看下目前主流的本地存储方案:
Cookie在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全。
Flash SharedObject之前明河有过介绍,有兴趣的朋友可以看《如何使用kissy的flash本地存储》,使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中,基本上不存在兼容性问题,缺点是要在页面中引入特定的swf和js文件,增加额外负担,处理繁琐;还是有部分机子没有flash运行环境。
Google GearsGoogle的离线方案,已经停止更新,官方推荐使用html5的localStorage方案。
User DataIE的早期版本的本地存储方案,看上去有点怪异,有兴趣的朋友可以看《跨浏览器的本地存储方案一》
localStorage
相对于上述本地存储方案,localStorage有自身的优点:容量大、易用、强大、原生支持;
缺点是兼容性差些(主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。
localStorage的API
非常通俗易懂的接口
- localStorage.getItem(key):获取指定key本地存储的值
- localStorage.setItem(key,value):将value存储到key字段
- localStorage.removeItem(key):删除指定key本地存储的值
留意localStorage存储的值都是字符串类型,在处理复杂的数据时,比如json数据时,需要借助JSON类,将json字符串转换成真正可用的json格式,localStorage第二个实战教程会重点演示相关功能。
localStorage还提供了一个storage事件,在存储的值改变后触发,比如下面代码:
明河整理的LS类
明河对localStorage进行了封装,写成LS,目前只是显示基础功能,日后会强化这个类,希望可以成为一个通用解决方案。
如何调用?
我们先来创建个评论表单:
接下来我们希望入框失去焦点后记忆输入框的值:(记忆三个字段:用户名、邮箱、网站,这样用户下次进入博客评论时无需重复输入这三个表单域)
监听输入框的blur事件,获取该输入框的id作为存储的key名,输入框的值自然是需要存储的值。
在页面结束后,我们还需要遍历下输入框,看看该id存不存在本地储存的值,如果有,将其写入到输入框。
明河结语
这是比较简单的localStorage使用场景,下一篇教程会增加难度,用localStorage来处理网站的“浏览历史”。
- html5本地存储localStorage实战(1)(转)
- html5本地存储localStorage实战(2)(转)
- html5本地存储localStorage实战
- HTML5 LocalStorage 本地存储(转)
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- How To Upgrade ASM from 10.2 to 11.1 (single Instance configuration -Non-RAC)
- Probability Theory
- listview单元格设置三种方法
- 7个超级实用的PHP代码片段
- 200个实用js
- html5本地存储localStorage实战(1)(转)
- 关于强类型Dataset出错提示未能启用约束。一行或多行中包含违反非空、唯一或外键约束的值
- mini2440的pwm驱动程序和测试程序详解
- android的Environment类
- 结合TOP N和Row_Number()分页因Order by排序规则不同引起的bug
- MIPS学习笔记(1)-字符串(string)比较
- ToDoList 6.3.x 中文资源包(原创翻译)
- html5本地存储localStorage实战(2)(转)
- segmentation fault