web本地存储-IndexedDB
IndexedDB, HTML5中的一种数据存储方式,索引数据库。
一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称。一个数据库可包含多个对象存储,一个对象存储相当于一张表,是一个记录集合。每个记录都有一个键(key)和值(value)。
(以下所有代码及说明均针对目前最新的API规范)
示例代码1:使用indexedDB数据库
//判断是否存在支持
if(window.indexedDB){
//打开一个数据存储库对象请求。指定参数存储库名和版本号。
request = indexedDB.open("db_test",1); //添加监听方法: 存储库不存在时触发该方法。
request.onupgradeneeded = function (event){
//存储库初始化的处理.
//创建存储对象表和修改版本需要在此处处理
var db = event.target.result;
}; //添加监听方法: 打开储存库成功后触发
//若存在版本改变,则在onupgradeneeded之后触发
//通过event对象参数可以得到一个Database对象实例的引用db,通过db就可以进行数据的读写操作。
request.onsuccess = function (e){
//请求成功后处理
var db = e.target.result;
}
}
一个数据库只能有一个版本号,版本号必须为长整型数据(新规范API只支持Long长整型数据),打开更高版本的数据库或者要打开的数据库本地不存在时,会触发onupgradeneeded,修改数据库和存储对象必须在此处处理。若触发onupgradeneeded则其执行完后再触发onsuccess。
示例代码2:创建存储对象及索引
var store = db.createObjectStore("tb_test",{keyPath: "name"});//创建名为tb_test的存储对象,主键key指定为name属性。
store.createIndex("by_name","name",{unique: true});//创建索引
createObjectStore(String name, optional IDBObjectStoreParameters optionalParameters):
此操作需要versionchange的特殊事务,db必须是具有已开启此事务的Database对象。
创建一个存储对象,第一参数为存储数据的表名。第二个可选{keyPath: key} 或者 {autoIncrement: true}
1、keyPath: 指定指定每条数据存储的主键key,key必须是存储对象中的一个属性
2、autoIncrement:为true则每添加一条数据,主键key值将自增产生。
3、如果没有指定第二个参数获取指定的无效如{keyPath: null}、{autoIncrement: false},此时在存储数据时必须手动指定主键key值得参数。
示例代码3:往存储对象中写入数据
var tx, store, index, request;
tx = db.transaction("tb_test", "readwrite");//开启一个读写事务
store = tx.objectStore("tb_test");//获取需要处理的存储对象
request = store.put({name: "test", message: "OK"});//写入数据
request.onsuccess = function (e){};//写入成功
request.onerror = function (e){};//error
示例代码4:读取存储对象中的数据
var tx, store, index, request;
tx = db.transaction("tb_test", "readonly");//开启一个只读事务
store = tx.objectStore("tb_test");//获取需要处理的存储对象
index = store.index("by_name");//获取一个索引
request = index.get("test");//使用索引获取"test"对象的值
request.onsuccess = function (e){
var matching = e.target.result, v = matching;
console.log(v);// -->{name: "test", message: "OK"}
};
request.onerror = function (e){
console.log(e.message);
};
兼容性:
indexedDB也存在很多兼容性问题,新旧版本规范和不同核心浏览器间均存在部分差异。
1、全局变量indexedDB差异:
webkitIndexedDB(webkit核心) mozIndexedDB(Gecko核心) msIndexedDB(IE核心)
目前主流的大部分最新版本浏览器同时存在indexedDB变量。
另外IDBTransaction和IDBKeyRange类似情况。
为兼容性考虑需在代码前加:
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
2、open方法参数目前新的规范与较老的略有不同,主要是第二个参数。具体可查阅W3C网站,个人感觉不太重要, 建议直接指定一个整数值得版本号即可。
3、onupgradeneeded方法:
较老版规范中是没有这个事件方法的,open方法中是没有对应版本号的参数的,因此在这种老版规范的浏览器中,是直接触发onsuccess的,相比来说,就是少了onupgradeneeded一步。这时原本onupgradeneeded中的初始化操作就没有了,因此需要另外添加处理。老版中提供了setVersion方法用于做这样的操作,通过判断打开的version与要打开的version是否相同来判定(触发过onupgradeneeded时,一定是相同的),然后处理。
1 //在onsuccess的函数代码前添加,此部分代码只有部分旧版才会执行
if(db.version != dbVersion){
var svReq = db.setVersion(dbVersion);
svReq.onsuccess = function (e) {
//此时处理与onupgradeneeded中相同的初始化操作。
};
}
4、开启transaction事务时,代表事务类型的参数值不同。
目前新版:只读 readonly, 读写 readwrite,版本改变 versionchange
旧版:IDBTransaction下存在三个常量 READ_ONLY = 0,READ_WRITE = 1,VERSION_CHANGE = 2
如果是这样的旧版,传入"readonly"这样的字符串将抛出异常,而新版若是传入对应的这种数字常量也将抛错。因此需做兼容性判断,可提前做如下定义。
var READ_ONLY = (IDBTransaction && IDBTransaction.READ_ONLY == 0) ? 0 : "readonly";
var READ_WRITE = (IDBTransaction && IDBTransaction.READ_WRITE) || "readwrite";
var VERSION_CHANGE = (IDBTransaction && IDBTransaction.VERSION_CHANGE) || "versionchange";
IndexedDB异步性:
IndexedDB基本上所有的操作都是异步性的操作,因此在应用时很多地方要特别注意。因此在函数执行结束时,IndexedDB操作可能并未完成。
案例:在存储对象初始化代码执行结束后,因为这里的事务也是异步的处理,对象存储环境可能并未完成,或者事务正在执行尚未完成。此时使用db再去做其他读写操作,就会抛出异常(A version change transaction is running.)。如何知道事务已经完成,事务中有一个oncomplete方法,当事务完成时将会触发。对初始化操作可添加修改如下(示例代码2):
var store = db.createObjectStore("tb_test",{keyPath: "name"});
store.createIndex("by_name","name",{unique: true});
store.transaction.oncomplete = function (e){
var db = e.target.db;
//此时事务已经完成。
};
更多信息可查阅http://www.w3.org/TR/IndexedDB/。
(第一次发文,如有错误的地方,还请多多包涵,问题建议都可提出,一定尽快回复和更新^_^)
参考资料:
http://www.w3.org/TR/IndexedDB/ W3C IndexedDB Database API
http://www.ibm.com/developerworks/cn/web/wa-indexeddb/ 使用HTML5 indexedDB API
http://database.51cto.com/art/201202/319551.htm 解决兼容性的部分参考
web本地存储-IndexedDB的更多相关文章
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- web本地存储
Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- HTML5本地存储——IndexedDB二:索引
HTML5本地存储——IndexedDB(二:索引) 在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- Html5 web 本地存储 (localStorage、sessionStorage)
HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...
随机推荐
- PHP学习笔记,自己动手写个MVC的框架
最新在大家自己的博客的过程中,发现各种开源的博客系统都或多或少的用起来别扭.于是想动手自己写个博客系统.既然写,就想好好写.那就先写个MVC框架.一点一点来.写的过程中有很多想法.还希望大家能够多多指 ...
- python运维开发(十一)----线程、进程、协程
内容目录: 线程 基本使用 线程锁 自定义线程池 进程 基本使用 进程锁 进程数据共享 进程池 协程 线程 线程使用的两种方式,一种为我们直接调用thread模块上的方法,另一种我们自定义方式 方式一 ...
- python操作redis--string
#!/usr/bin/python #!coding:utf-8 """ 完成用redis模块操作string类型的数据 """ impor ...
- 使用Hashtable和List结合拼json数据
在做项目的时候,有时候需要向页面返回一个特定的json类型的数据,一般情况下会有下面的方法进行拼接: public String chongzhiList() throws Exception { L ...
- html5 新增语义标签
一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...
- C语言的本质(24)——C标准库之输入与输出(下)
4.读写二进制文件 C语言还提供了用于整块数据的读写函数.可用来读写一组数据,如一个数组元素,一个结构变量的值等. 读数据块函数调用的一般形式为: fread(buffer,size,count,fp ...
- Android的数据存储方式(转)
数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 ...
- U盘量产的作用
优盘量产:字面意思就是,批量生产优盘.是指批量对U盘主控芯片改写数据,如,写生产厂商信息.格式化等.而用来对U盘完成该操作的软件程序,顾名思义就是U盘量产工具. U盘量产的作用: 电脑正确识别 ...
- Android 动画之ScaleAnimation应用具体解释
android中提供了4中动画: AlphaAnimation 透明度动画效果 ScaleAnimation 缩放动画效果 TranslateAnimation 位移动画效果 RotateAnimat ...
- 数据分析与R语言
数据结构 创建向量和矩阵 函数c(), length(), mode(), rbind(), cbind() 求平均值,和,连乘,最值,方差,标准差 函数mean(), sum(), min(), m ...