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

推荐订阅源

B
Blog
V
Vulnerabilities – Threatpost
Apple Machine Learning Research
Apple Machine Learning Research
V
V2EX
博客园 - 叶小钗
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
Latest news
Latest news
博客园 - 三生石上(FineUI控件)
美团技术团队
aimingoo的专栏
aimingoo的专栏
Google Online Security Blog
Google Online Security Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
T
Threatpost
Y
Y Combinator Blog
T
Tailwind CSS Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
A
Arctic Wolf
C
Cyber Attacks, Cyber Crime and Cyber Security
小众软件
小众软件
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Tenable Blog
W
WeLiveSecurity
L
LINUX DO - 热门话题
D
Docker
Cyberwarzone
Cyberwarzone
量子位
A
About on SuperTechFans
The Last Watchdog
The Last Watchdog
雷峰网
雷峰网
C
CERT Recently Published Vulnerability Notes
P
Palo Alto Networks Blog
The Hacker News
The Hacker News
Blog — PlanetScale
Blog — PlanetScale
P
Proofpoint News Feed
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
F
Full Disclosure
The Cloudflare Blog
T
The Blog of Author Tim Ferriss
T
The Exploit Database - CXSecurity.com
Engineering at Meta
Engineering at Meta
O
OpenAI News
Hacker News - Newest:
Hacker News - Newest: "LLM"
Scott Helme
Scott Helme
IT之家
IT之家
S
Secure Thoughts
MongoDB | Blog
MongoDB | Blog
L
Lohrmann on Cybersecurity
博客园 - 司徒正美
Google DeepMind News
Google DeepMind News

囧克斯

奔四了,写给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。到那时,我们可以再做更深入的讨论和交流。