在 HTML5 前,现代浏览器的储存方案是通过 cookie 等技术实现。Cookie 必须在 HTML 文件的内容输出之前设置;不同的浏览器 (Netscape Navigator、Internet Explorer) 对 Cookie 的处理不一致,使用时一定要考虑;客户端用户如果设置禁止 Cookie,则 Cookie 不能建立。 并且在客户端,一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个。每次请求,都会将 cookie 带上,这增加了消耗,因此这不合适大量数据储存。
发展到 HTML5 之后,对数浏览器数据储存有了更多的选择,localstorage
和 DB
,localstorage 存储的容量也有限制,不能存储太大的数据,但是这不会增加网络的消耗,可以作为小数据的本地储存。
《IndexedDB
用户本地数据》专题最重要的就是介绍 IndexedDB
的简介发展和应用实例,会告诉大家如何配合后台语言作出一个比较实用的项目,同时更深入的了解 IndexedDB
这门技术。
其实啊,IndexedDB
是一种低级 API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该 API 使用索引来实现对该数据的高性能搜索。IndexedDB
是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表,IndexedDB
是一个基于 JavaScript 的面向对象的数据库。 IndexedDB
允许您存储和检索用键索引的对象; 可以存储 structured clone algorithm 支持的任何对象。 你只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务中的数据。
使用 IndexedDB
,你可以存储或者获取数据,使用一个 key 索引的。 你可以在事务(transaction)中完成对数据的修改。和大多数 web 存储解决方案相同,IndexedDB
也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据,而不能访问其他域的。
API 包含异步(asynchronous) API 和同步(synchronous)API 两种。异步 API 适合大多数情况, 同步 API 必须同 WebWorkers 一同使用。 目前,没有主流浏览器支持同步 API, 即使同步 API 被支持了,你也会在大多数的情况使用异步 API。
IndexedDB
是 WebSQL 数据库的取代品, W3C 组织在 2010 年 11 月 18 日废弃了 webSql。IndexedDB
和 WebSQL 的不同点在于 WebSQL 是关系型数据库(复杂)IndexedDB
是 key-value 型数据库(简单好使)。
基本概念
像其他 key-value 数据库一样(不是关系型数据库,nosql 的):
IndexedDB
数据库使用 key-value 键值对储存数据 values 数据可以是结构非常复杂的对象,key 可以使对象自身的属性。你可以对对象的某个属性创建索引(index)以实现快速查询和列举排序,key 可以使二进制对象。IndexedDB
是事务模式的数据库任何操作都发生在事务(transaction)中。 IndexedDB
API 提供了索引(indexes), 表(tables), 指针(cursors)等等, 但是所有这些必须是依赖于某种事务的。因此,你不能在事务外执行命令或者打开指针。事务(transaction)有生存周期, 在生存周期以后使用它会报错。并且,事务(transaction)是自动提交的,不可以手动提交。当用户在不同的标签页同时打开 Web 应用的两个实例时,这个事务模型就会非常有用。如果没有事务操作的支持,这两个实例就会互相影响对方的修改。IndexedDB
API 基本上是异步的 IndexedDB
的 API 不通过 return 语句返回数据,而是需要你提供一个回调函数来接受数据。执行 API 时,你不以同步(synchronous)方式对数据库进行“存储”和“读取”操作,而是向数据库发送一个操作“请求”。当操作完成时,数据库会以 DOM 事件的方式通知你,同时事件的类型会告诉你这个操作是否成功完成。这个过程听起来会有些复杂,但是里面是有明智的原因的。这个和 XMLHttpRequest 请求是类似的 IndexedDB
数据库“请求”无处不在我们上边提到,数据库“请求”负责接受成功或失败的 DOM 事件。每一个“请求”都包含 onsuccess 和 onerror 事件属性,同时你还对“事件”调用 addEventListener()和 removeEventListener()。“请求”还包括 readyState,result 和 errorCode 属性,用来表示“请求”的状态。result 属性尤其神奇,他可以根据“请求”生成的方式变成不同的东西,例如:IDBCursor 实例、刚插入数据库的数值对应的键值(key)等。IndexedDB
在结果准备好之后通过 DOM 事件通知用户 DOM 事件总是有一个类型(type)属性(在 IndexedDB
中,该属性通常设置为 success 或 error)。DOM 事件还有一个目标(target)属性,用来告诉事件是被谁触发的。通常情况下,目标(target)属性是数据库操作生成的 IDBRequest。成功(success)事件不弹出提示并且不能撤销,错误(error)事件会弹出提示且可以撤销。这一点是非常重要的,因为除非错误事件被撤销,否则他们会终止所在的任何事务。IndexedDB
是面向对象的 IndexedDB
不是用二维表来表示集合的关系型数据库。这一点非常重要,将影响你设计和建立你的应用程序。传统的关系型数据库,你需要用到二维表来存储数据集合(每一行代表一个数据,每一列代表一个属性),IndexedDB
有所不同,它要求你为一种数据创建一个对象存储(object Store),只要这种数据一个 JavaScript 对象即可。每个对象存储都有一个索引(index)集合以方便查询和迭代遍历。IndexedDB
不使用结构化查询语言(SQL)。它通过索引(index)所产生的指针(cursor)来完成查询操作,从而使你可以迭代遍历到结果集合。IndexedDB
遵循同源(same-origin)策略“源”指脚本所在文档 URL 的域名、应用层协议和端口。每一个“源”都有与其相关联的数据库。在同一个“源”内的所有数据库都有唯一、可区别的名称。IndexedDB
的安全机制避免应用访问非同“源”的数据。例如,http://www.webkk.com 的应用或页面可以访问 https://www.helay.net/blog/的数据,因为他们同“源”。但是它们不能访问 http://www.helay.com:80/blog/(不同端口)或 https://www.helay.com/blog/(不同协议)的数据,因为他们不同“源”。不过 IndexedDB
也有局限性,一下一些情况就不合适使用 IndexedDB
- 全球多种语言混合存储,国际化支持不好,需要自己处理;
- 和服务器端数据库同步,你得自己写同步代码;
- 全文搜索。
另外的,这些情况数据库可能会被清除
- 用户请求清除数据;
- 浏览器处于隐私模式。最后退出浏览器的时候,数据会被清除;
- 硬盘等存储设备的容量到限;
- 不正确的;
- 不完整的改变。