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

推荐订阅源

Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
C
CXSECURITY Database RSS Feed - CXSecurity.com
L
LINUX DO - 热门话题
S
Secure Thoughts
TaoSecurity Blog
TaoSecurity Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
T
Threat Research - Cisco Blogs
AI
AI
B
Blog RSS Feed
S
Schneier on Security
雷峰网
雷峰网
Schneier on Security
Schneier on Security
Help Net Security
Help Net Security
Cloudbric
Cloudbric
L
LINUX DO - 最新话题
罗磊的独立博客
有赞技术团队
有赞技术团队
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Apple Machine Learning Research
Apple Machine Learning Research
P
Proofpoint News Feed
酷 壳 – CoolShell
酷 壳 – CoolShell
The Hacker News
The Hacker News
博客园 - Franky
Attack and Defense Labs
Attack and Defense Labs
The Cloudflare Blog
Webroot Blog
Webroot Blog
Last Week in AI
Last Week in AI
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
博客园 - 叶小钗
美团技术团队
L
Lohrmann on Cybersecurity
T
The Blog of Author Tim Ferriss
The Last Watchdog
The Last Watchdog
T
Troy Hunt's Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Vercel News
Vercel News
Know Your Adversary
Know Your Adversary
O
OpenAI News
博客园 - 【当耐特】
Hacker News - Newest:
Hacker News - Newest: "LLM"
C
Cybersecurity and Infrastructure Security Agency CISA
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
www.infosecurity-magazine.com
www.infosecurity-magazine.com
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
PCI Perspectives
PCI Perspectives
H
Heimdal Security Blog
I
InfoQ
GbyAI
GbyAI
T
Threatpost
C
Cisco Blogs

囧克斯

奔四了,写给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-09 · via 囧克斯

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


接下来介绍IndexedDB(以下简称IDB)的JS接口设计


如图所示,我们按照操作过程,把IDB的接口分成三部分来介绍:
1.初始化数据库连接
2.在数据库中建表
3.在表中存取数据

初始化数据库连接

var req = window.IndexedDB.open(dbName, dbVersion);
req.onsuccess = function (e) {...}
req.onupgradeneeded = function (e) {...}
req.onerror = function (e) {...}

这里有两个重要的参数,dbName是数据库的名称,dbVersion是数据库的“版本”。第2个参数“版本”可能不太好理解,IDB不允许数据库中的表在同一个版本中发生变化,所以当我们创建新表或删除旧表的时候,必须使用一个不一样的版本号。他的作用在于避免重复修改数据库的表结构。默认的版本是空字符串"",我们在使用时,可以使用"1.0"。如果请求中的版本号和当前数据库的版本号相同,则会触发onsuccess事件,如果版本号不同,则会触发onupgradeneeded事件,我们在这一事件中可以对数据库的表结构进行修改,然后再触发onsuccess事件。

在数据库中建表

req.onupgradeneeded = function (e) {
var db = req.result;
vardb.createObjectStore(storeName, optionParameters);
};

之前提到了,当被访问的数据库版本号需要发生改变时,onupgradeneeded事件会被触发,我们就从这个事件继续说起。通过req.result我们可以得到当前的数据库对象dbdb有一个方法createObjectStore,是专门用来创建表的。第一个参数是表的名称,第二个参数是可选的,它决定了我们要创建的表是内联关键字还是外部关键字,关键字是否需要自动生成,代表这两个设置的字段分别是keyPathautoIncrement。比如,当第二个参数是

{keyPath: 'profile.id', autoIncrement: false}

时,说明这个表采用内联关键字,且keyPathprofile.id,同时关键字不是自增的,需要每次插入数据时手动设定;当第二个参数是

{autoIncrement: true}

时,说明这个表采用外部关键字,并且关键字是自增的。

同样的,我们可以在onupgradeneeded事件中删除一个表,方法是db.deleteObjectStore(storeName)。道理很简单,就不展开论述了。

在表中存取数据

req.onsuccess = function (e) {
var db = req.result;
var transaction = db.transaction(storeNames, mode);
var store = transaction.objectStore(storeName);
var subReq = store.add(value, key);
// var subReq = store.get(key);
// var subReq = store.delete(key);
// var subReq = store.clear();
subReq.onsuccess = function (e) {
console.log(subReq.result);
};
};

对表中数据的存取通常是在onsuccess事件之后进行的。同样的,我们可以通过req.result获取数据库对象db,并随时通过db进行各种存取数据的操作。
上一篇文章提到了,所有的数据库操作都是在事务(transaction)中进行的,具体代码格式是这样的:
第一句,先创建一个transaction,两个参数分别是会涉及到的表的名字和读写模式,表的名字可以是数据也可以是字符串,如"users"["users", "articles"],读写模式可以是IDBTransaction.READ_ONLYIDBTransaction.READ_WRITE
第二句,用transaction对象获取一个表,需要传入的参数是表的名称。
第三句及其后面的四句注释掉的代码,分别是我们可以利用store这个对象进行的基本的表操作——添加数据、获取数据、删除数据、清空表。参数也都很好理解,有一个要注意的地方是,添加数据时,key是可选项,如果我们已经在表里定义了keyPath或表本身有自增关键字,则key是不需要写的。
最后,如第一篇文章所说,这些操作是异步进行的,想获得操作的结果,可以在subReq.onsuccess事件中,通过访问subReq.result获取操作结果。添加操作的操作结果是关键字,获取数据的操作结果是对象的值,删除操作和清空操作无需返回结果。

上述介绍是IDB的一些基本操作,我刻意省略掉了IDB中的遍历、索引以及对各种出错异常的处理。为的是给大家一个直观的印象,用了上面的接口,我们起码可以做到一件事,就是想使用localStorage一样通过键值对来存取json对象。

下一篇文章,会进一步介绍遍历操作,并结合firefox 10对IndexedDB的支持情况做一个简单的demo。

(未完待续)