对HTML5中LocalStorage的一些使用建议
2014-04-03 21:28
363 查看
上个月末的w3ctech上,有同行提到了LocalStorage这个话题,我觉得在HTML5的众多新特性中,LocalStorage算是比较实际同时浏览器也比较好实现的特性。
LocalStorage的规范描述在这里:http://dev.w3.org/html5/webstorage/
首先一个细节,LocalStorage只能存储键值对(key-value pair)形式的数据,并且key和value都只能存储为字符串类型。之所以这样说,因为JS是动态语言,我们可以在
第二,虽然
那么整个LocalStorage的接口完备性将会遭到破坏。
当然,对JS比较熟悉的童鞋可以思考一个附加的变态问题,执行了上述代码之后,localStorage还有没有办法恢复正常呢?
第三,如果我们不想存储字符串,而是类型更丰富结构更复杂的数据,我们推荐大家和JSON的相关函数
第四,LocalStorage跟cookies一样是按照域名为单位进行独立存储的,且是有容量上限的(一般为5MB),当我们调用
上述四个建议是我个人使用LocalStorage最常碰到的状况,这里分享给大家。
最后在附送一个“高阶”技巧:
这个特性可以帮助我们在多个页面间实现简单的通信、同步和数据交互,比如在一个网站的用户设置页面中修改用户昵称,那么你的所有页面中的昵称也都瞬间改变了。当然,与之产生的注意事项是要回避循环修改,以免浏览器进入死循环。
LocalStorage的规范描述在这里:http://dev.w3.org/html5/webstorage/
首先一个细节,LocalStorage只能存储键值对(key-value pair)形式的数据,并且key和value都只能存储为字符串类型。之所以这样说,因为JS是动态语言,我们可以在
setItem时传入int型数据(比如
localStorage.setItem("a", 1)),但是它会转换成字符串之后再进行存储和准备随时调用,当我们用
getItem访问
"a"时(
localStorage.getItem("a")),得到的是字符串
"1"而非数字
1。
第二,虽然
localStorage[key] = value的写法主流的浏览器都是支持的,但标准里并没有明确的要求,所以不推荐这样书写代码。而且很显而易见的问题是:对
length、
setItem、
getItem、
clear这样的key进行读写是会产生问题的。假如我们执行:
localStorage.setItem = null; localStoarge.removeItem = null; localStorage.clear = null;
那么整个LocalStorage的接口完备性将会遭到破坏。
当然,对JS比较熟悉的童鞋可以思考一个附加的变态问题,执行了上述代码之后,localStorage还有没有办法恢复正常呢?
第三,如果我们不想存储字符串,而是类型更丰富结构更复杂的数据,我们推荐大家和JSON的相关函数
JSON.parse/
JSON.stringify配合使用。这样我们可以方便复杂数据结构和字符串之间的转换,获取数据的时候使用
JSON.parse(localStorage.getItem("a")),写入数据的时候使用
localStorage.setItem("a", JSON.stringify(obj))。
第四,LocalStorage跟cookies一样是按照域名为单位进行独立存储的,且是有容量上限的(一般为5MB),当我们调用
setItem时如果超过容量上限,会触发
QuotaExceededError异常。我的经验是,如果你是存文本的,一般碰不到这根线,可以无视;如果用DataURI方式存二进制文件,就需要特别注意了,视频的话,基本没有5MB以下的,所以不会考虑LocalStorage的,也不用特别注意;但如果是图片,很容易几百K的图片多存几张就够5MB了,所以有必要提个醒。当然有些浏览器也会通过提醒用户确认来允许网站使用更多的容量,那个是另一说了。
上述四个建议是我个人使用LocalStorage最常碰到的状况,这里分享给大家。
最后在附送一个“高阶”技巧:
window.onstorage事件。其实这也不算多高级,只是用的地方比较少罢了。假如我们同时打开了同域下的多个页面,这时我在一个页面里操作
localStorage.setItem、
localStorage.removeItem或
localStorage.clear,其它同域的页面就会触发这个事件。事件附带的参数是这样的:
window.onstorage = function (event) { var key = event.key // 被修改的键名 var oldValue = event.oldValue // 旧的值 var newValue = event.newValue // 新的值 var url = event.url // 触发改变的网页的url var storage = event.storageArea // 当前localStorage的引用(当sessionStorage改变时,这里就是当前sessionStorage的引用,好吧扯远了,看不懂可以先无视) }
这个特性可以帮助我们在多个页面间实现简单的通信、同步和数据交互,比如在一个网站的用户设置页面中修改用户昵称,那么你的所有页面中的昵称也都瞬间改变了。当然,与之产生的注意事项是要回避循环修改,以免浏览器进入死循环。
相关文章推荐
- html5
- html5学习之一
- html5 canvas 画图基本教程
- 为你的html5网页添加音效示例
- HTMl5+CSS3 知识汇总【待更新整理...】
- What's new in HTML5?
- HTML5性能测试
- html5 语音搜索
- html5+css3实现抽屉菜单
- HTML5 <article> Tag,html5常见的哦
- HTML5 <address> Tag,这个标签貌似挺常用
- HTML5 < !DOCTYPE >声明
- HTML5 Tutorial,老生常谈了吗?
- HTML5与CSS3
- HTML5
- HTML5 Canvas 概述
- Dojo1.6新特性:HTML5进行时
- 大爱HTML5 9款超炫HTML5最新动画源码
- 大爱HTML5 9款超炫HTML5最新动画源码
- HTML5新增元素兼容旧浏览器的解决办法