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

推荐订阅源

cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
P
Palo Alto Networks Blog
S
Securelist
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
NISL@THU
NISL@THU
L
Lohrmann on Cybersecurity
有赞技术团队
有赞技术团队
The GitHub Blog
The GitHub Blog
C
Cisco Blogs
B
Blog
Microsoft Azure Blog
Microsoft Azure Blog
Recent Announcements
Recent Announcements
Simon Willison's Weblog
Simon Willison's Weblog
T
Tenable Blog
Know Your Adversary
Know Your Adversary
Spread Privacy
Spread Privacy
WordPress大学
WordPress大学
月光博客
月光博客
Latest news
Latest news
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threat Research - Cisco Blogs
Cisco Talos Blog
Cisco Talos Blog
I
InfoQ
D
Darknet – Hacking Tools, Hacker News & Cyber Security
W
WeLiveSecurity
Hacker News - Newest:
Hacker News - Newest: "LLM"
酷 壳 – CoolShell
酷 壳 – CoolShell
U
Unit 42
C
Cybersecurity and Infrastructure Security Agency CISA
博客园 - 聂微东
人人都是产品经理
人人都是产品经理
Google DeepMind News
Google DeepMind News
Apple Machine Learning Research
Apple Machine Learning Research
Attack and Defense Labs
Attack and Defense Labs
罗磊的独立博客
T
The Exploit Database - CXSecurity.com
I
Intezer
GbyAI
GbyAI
Jina AI
Jina AI
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Blog — PlanetScale
Blog — PlanetScale
博客园 - 司徒正美
Google Online Security Blog
Google Online Security Blog
Engineering at Meta
Engineering at Meta
D
Docker
Recent Commits to openclaw:main
Recent Commits to openclaw:main
小众软件
小众软件
云风的 BLOG
云风的 BLOG
爱范儿
爱范儿
Project Zero
Project Zero

囧克斯

奔四了,写给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技术简介(二) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 对HTML5中LocalStorage的一些使用建议 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
IndexedDB技术简介(一)
勾三股四 · 2012-02-08 · via 囧克斯

IndexedDB 是HTML5中的一种数据存储方式。用来帮助网站,在浏览器本地,存储结构比较复杂的数据。它和HTML5中其它的数据存储方式有一些共性:

1.和我们熟知的cookies类似,IndexedDB是每个域名独立存储数据的。
对cookies不熟悉的童鞋,可以顺便学习一下cookies,不过这不影响大家理解IndexedDB。网上cookies的教材和文章非常多,这里不一一列举。

2.和localStorage相比,IndexedDB可以存储任意格式的json object,而localStorage则只能存string,我们在使用localStorage存储复杂数据的时候,常常会协同JSON.parse和JSON.stringify一起工作,而IndexedDB则可以直接存取对象,无需转换成字符串。
对localStorage不熟悉的童鞋,可以查阅w3c官方文档,这里有一份我参与翻译的中文版文档,这里还有一些localStorage的使用建议

3.和web sql database类似,IndexedDB也分数据库,每个数据库可以建立多个不同配置的表,而且所有的操作都在事务(transaction)中完成,不同之处在于web sql database是通过SQL执行语句来完成操作的,而IndexedDB则直接通过JS API完成操作。
需要指出的是,web sql database规范已经被w3c抛弃,对此不熟的朋友,也不必学习了,如果有童鞋想尝试的,可以找一款webkit浏览器试试看(傲游3、chrome、safari)

IndexedDB的整体存储结构

见下图,IndexedDB(以下简称IDB)严格遵循w3c的同源策略,每个源都拥有独立的大存储空间;每个大存储空间内,又可以通过当前源下的页面脚本创建多个数据库;每个数据库可以包含多个表(ObjectStore);每个表都是一个json对象列表,可以存储多个json对象,比如{"name": "jinjiang", "age": 26}

ObjectStore中的key

不同的源、不同的数据库、不同的表、不同的对象,都是如何识别的呢?不同的源直接通过域名进行识别,比如weibo.com、maxthon.cn、renren.com;不同的数据库通过一个字符串(name)识别,比如"blog"、"bbs"、"wiki"等;不同的表也通过一个字符串(name)识别,比如"users"、"contacts"、"articles"等;上面这些识别方式都很好理解,不太好理解的,是如何在表(ObjectStore)中识别不同的json对象,即key。

IDB为ObjectStore提供了两种key:
1.键值对(out-of-line keys: key-value pair)
2.键路径(inline keys: keyPath)

第1种是比较好理解的,就像localStorage中的键值对类似,一个key对应一个value,不同的时,localStorage中的key和value都是字符串类型的,而IDB中的key和value都可以是其它json对象。比如

以上就是2种json对象的识别方式。除此之外,我们还可以为ObjectStore加入自增id特性(key generator),这一特性可以让IDB在添加数据时自动分配一个唯一的key,如果是第2种key,IDB还会把key存在响应的keyPath下。