惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
S
Secure Thoughts
月光博客
月光博客
美团技术团队
雷峰网
雷峰网
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
N
News and Events Feed by Topic
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Forbes - Security
Forbes - Security
W
WeLiveSecurity
P
Proofpoint News Feed
阮一峰的网络日志
阮一峰的网络日志
爱范儿
爱范儿
G
GRAHAM CLULEY
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
AI
AI
Last Week in AI
Last Week in AI
Google Online Security Blog
Google Online Security Blog
Schneier on Security
Schneier on Security
云风的 BLOG
云风的 BLOG
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Recent Announcements
Recent Announcements
Webroot Blog
Webroot Blog
T
Tor Project blog
Cisco Talos Blog
Cisco Talos Blog
N
News and Events Feed by Topic
罗磊的独立博客
The Register - Security
The Register - Security
Blog — PlanetScale
Blog — PlanetScale
T
Threat Research - Cisco Blogs
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
人人都是产品经理
人人都是产品经理
T
The Exploit Database - CXSecurity.com
www.infosecurity-magazine.com
www.infosecurity-magazine.com
B
Blog
腾讯CDC
Microsoft Azure Blog
Microsoft Azure Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Engineering at Meta
Engineering at Meta
Latest news
Latest news
IT之家
IT之家
D
DataBreaches.Net
博客园 - 司徒正美
N
Netflix TechBlog - Medium
V
V2EX
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

囧克斯

奔四了,写给40岁的自己 有序退网 我和 Vue.js 的十年 我参与《代码之外 Beyond Code》的故事 博客站迁移至 VitePress 的备忘 写给我的奶奶 中文格式化小工具 zhlint 及其开发心得 vue-mark-display:用 markdown 语法轻松撰写幻灯片 我对技术会议的一些看法 VueConf Hangzhou 见闻 第四届 CSSConf CN 见闻 [译]Web 表单的未来 [译]苹果正在做一些他们的程序员明摆着不想要的东西 [译]为什么我不会无偿加班且你也不应该 [译]如果管理是唯一可走的路,那就完蛋了 [译]如何撰写 Git 提交信息 [译]C 程序的原则 Vue 2.0 来了! Weex 近 4 个月的开源之路 Weex 在 JS Runtime 内的多实例管理 我理解的 SPA 我理解的 Flux 架构 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 通过一张图走进 Vue 2.0 Code Review for Vue 2.0 Preview Vue 2.0 发布啦! 务实的小而美 Vue.js 1.0.0 发布了! [译]如何成为一名卓越的前端工程师 手机淘宝前端的图片相关工作流程梳理 [译]如何让办公室政治最小化 Vue.js 源码学习笔记 从原型到发布——“团队时间线” 1.0 开发心得 Vue + webpack 项目实践 用 Koa 写服务体验 webcomponents 笔记 之 配置管理 小秀个人的13~14年摄影作品 (共19张) 由今年D2前端论坛想到的 [译]CSS命名神马的真心难 [译]Git 分支的最佳实践 [译]撰写可测试的 JavaScript [译]语义化版本管理 [译]通过HTML5 Canvas API调节图像的亮度和颜色 [译]JavaScript V8性能小贴士 [译]视觉差,走起! [译]Chrome开发者工具中评估性能的五大新特性 精气神儿 细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202 秦升拿到红牌之后…… 用Sass重新整理自己的博客主题样式 Connect中间件使用手册 巧用 RequireJS Optimizer 给传统的前端项目打包 编辑器小调查结果 [译]JSLint 文档 烟火——写给蛇年的傲游和我 小秀个人的全年摄影作品 (共15张) 2012年终毫无正能量的总结 标签?ID?还是CLASS? 微创新=伪创新 HTML5峰会归来 分享bookmarklet一则:随意阅读 国际羽联和中国队之间的恶性循环 ZeroClipboard 学习笔记 “思考人生” 听杨东杰弹吉他 学习精髓 网站装修笔记20120426 网站装修笔记20120414 网站装修笔记20120406 分享Typecho插件:百度统计助手 我的得奖感言 网站装修笔记20120331 用CSS3制作尖角标签按钮样式 分享Typecho插件:Markdown 解析器 + 编辑器 分享Typecho皮肤:我的字很大 汇总自己过去的一些HTML5科普文章 html5中的消息通信简介 + 我的新网站开张 网站装修计划 Typed Arrays 是神马? 文明看球 HTML5中的文件处理 之 File Writer API HTML5中的文件处理 之 File API 独生子女、互相等和不耐烦 IndexedDB技术简介(四) IndexedDB技术简介(三) IndexedDB技术简介(二) IndexedDB技术简介(一) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
对HTML5中LocalStorage的一些使用建议
勾三股四 · 2012-01-05 · via 囧克斯

本文摘自 勾三股四 更早时期的 不老歌 博客。


上个月末的w3ctech上,有同行提到了LocalStorage这个话题,我觉得在HTML5的众多新特性中,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的写法主流的浏览器都是支持的,但不推荐这样书写代码(更正一下,标准里有getter/setter的明确规定,上书写法也是标准的一部分,感谢Kenny提醒)。而且很显而易见的问题是:对lengthsetItemgetItemclear这样的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.setItemlocalStorage.removeItemlocalStorage.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的引用,好吧扯远了,看不懂可以先无视)
}

这个特性可以帮助我们在多个页面间实现简单的通信、同步和数据交互,比如在一个网站的用户设置页面中修改用户昵称,那么你的所有页面中的昵称也都瞬间改变了。当然,与之产生的注意事项是要回避循环修改,以免浏览器进入死循环。

以上

其实对于LocalStorage还有很多细节,对HTML5感兴趣的童鞋可以进一步挖掘。来年的交流会上,我们一定还会聊到LocalStorage。到那时,我们可以再做更深入的讨论和交流。