Indexed DB入门导学(1)

在html 5中,其中一个引人注意的新特性,那就是允许使用Indexed DB。用户可以从这个链接(http://www.w3.org/TR/IndexedDB/)了解到Indexed DB的详细标准。在本文中,将对Indexed DB作简单的入门介绍。

概述

从本质上说,IndexedDB允许用户在浏览器中保存大量的数据。任何需要发送大量数据的应用都可以得益于这个特性,可以把数据存储在用户的浏览器端。当前这只是IndexedDB的其中一项功能,IndexedDB也提供了强大的基于索引的搜索api功能以获得用户所需要的数据。

用户可能会问:IndexedDB是和其他以前的存储机制(如cookie,session)有什么不同?

Cookies是最常用的浏览器端保存数据的机制,但其保存数据的大小有限制并且有隐私问题。Cookies并且会在每个请求中来回发送数据,完全没办法发挥客户端数据存储的优势。

再来看下Local Storage本地存储机制的特点。Local Storage在HTML 5中有不错的支持,但就总的存储量而言依然是有所限制的。Local Storage并不提供真正的“检索API”,本地存储的数据只是通过键值对去访问。Local Storage对于一些特定的需要存储数据的场景是很适合的,例如,用户的喜好习惯,而IndexedDB则更适合存储如广告等数据(它更象一个真正的数据库)。

在我们进一步探讨Indexed DB前,我们先看下目前的主流浏览器对Indexed DB的支持。 IndexedDB目前依然是一个w3c中候选的建议规范,在这一点上规范目前还是令人感到满意的,但现在正在寻找开发者社区的反馈。该规范可能会在到最后确认阶段前会因应w3c的建议有所变化。在一般情况下,目前的浏览器对IndexedDB的支持都以比较统一的方式实现,但开发者应注意在未来的更新及对此作出一定的修改。

我们来看来自CanIUse.com的对于各浏览器对IndexedDB的支持的图表,可以看到,目前桌面端浏览器对其的支持是不错的,但移动端浏览器的支持就比较少了:

Chrome for Android支持IndexedDB,但很少人目前在Android设备上使用这款浏览器。是否缺乏移动端浏览器的支持就意味着不应该使用它呢?当然不是!幸好我们的开发者都懂得持续改进的概念。象IndexedDB这样的特性可以用其他的方式添加到那些不支持该功能的浏览器中。用户可以使用包装过的类库去转换到移动端的WebSQL,又或者干脆不在移动端进行本地存储数据。我个人认为能在客户端缓存大量的数据,对使用上来说是很重要的功能,即使缺乏移动端的支持。

开始学习

首先,在使用IndexedDB前,要做的是检查当前的浏览器对IndexedDB是否支持,做法只需要使用如下代码就可以实现:

document.addEventListener("DOMContentLoaded", function(){ 

    if("indexedDB" in window) {
        console.log("YES!!! I CAN DO IT!!! WOOT!!!");
    } else {
        console.log("I has a sad.");
    } 

},false);

  

上面的代码中,使用了DOMContentLoaded事件在加载的过程中,通过判断在window对象中是否存在indexedDB,当然为了在接下来的过程中记住判断的最终结果,可以使用如下的代码更好地保存:

var idbSupported = false; 

document.addEventListener("DOMContentLoaded", function(){ 

if("indexedDB" in window) {
idbSupported = true;
} 

},false);

  

操作数据库

下面要讲解的是如何操作IndexedDB数据库。首先要了解的是,IndexedDB并不象传统的如SQL Server那样需要额外安装。Indexed是存在于浏览器端的并且能被用户所访问控制。IndexedDB和cookies和local storage的原则是一样的,就是一个IndexedDB是和一个唯一的DOMAIN相关联的。比如名为“Foo”的数据库是由foo.com所关联的,是不会和goo.com所创建的同名“Foo”数据库冲突的,因为他们属于不同的domain,并且他们之间是不能互相访问的。

打开一个数据库是通过命令执行的。基本的用法是提供数据库的名称和版本号即可,其中版本是十分重要的,稍候会作解析。下面是基本的例子:

var openRequest = indexedDB.open("test",1);

打开一个IndexedDB数据库是异步的操作。为了处理操作的返回结果,需要增加一些事件的监听,目前有四种不同类型的事件监听事件:

  • success
  • error
  • upgradeneeded
  • blocked

大家可能已经能知道success和error事件的含义了。而upgradeneeded事件是在首次打开数据库或者改变数据库版本的时候被触发。blocked事件是在前一个连接没有被关闭的时候被触发。

让我们看下接下来的例子,其中当首次访问网站的时候会触发upgradeneeded事件,然后是success事件。

var idbSupported = false;
var db; 

document.addEventListener("DOMContentLoaded", function(){ 

    if("indexedDB" in window) {
        idbSupported = true;
    } 

    if(idbSupported) {
        var openRequest = indexedDB.open("test",1); 

        openRequest.onupgradeneeded = function(e) {
            console.log("Upgrading...");
        } 

        openRequest.onsuccess = function(e) {
            console.log("Success!");
            db = e.target.result;
        } 

        openRequest.onerror = function(e) {
            console.log("Error");
            console.dir(e);
        } 

    } 

},false);

  

时间: 2024-10-25 14:01:54

Indexed DB入门导学(1)的相关文章

Python入门+进阶 第1章 Python入门导学(无论何时,只要开始就不晚)

1. Python入门导学 1.1 Python概念 Python(英国发音:/?pa?θ?n/ 美国发音:/?pa?θɑ?n/) 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结构. Python 是一种解释型语言: 这意味着开发过程中没有了编译这个环节.类似于PHP和Perl语言. Python 是交互式语言: 这意味着,您可以在一个Python提示符

每天进步一点点-实例为导学-一个java对象序列化的例子

序列化和反序列化例子 如果我们想要序列化一个对象, (对象 转 序列)首先要创建某些OutputStream(如FileOutputStream.ByteArrayOutputStream等),然后将这些OutputStream封装在一个ObjectOutputStream中.这时候,只需要调用writeObject()方法就可以将对象序列化,并将其发送给OutputStream(记住:对象的序列化是基于字节(1字节8位)的,不能使用Reader和Writer等基于字符的层次结构).而反序列的过

关于项目分组和项目合并——入门必学

项目分组:前台INDEX文件对应一个index.php单入口文件,后台ADMIN对应另外一个单入口文件,这种模式: 项目分组的劣势是:很多的配置文件.函数无法共用.所有我们开始用项目合并的方式来做: 步骤: 1.像之前一样建立单入口文件(只需要一个单入口文件): 2.建立公用配置文件(命名为config.php): 在APP/Conf文件夹下的配置文件中添加以下两个定义(其它的还一样): 'APP_GROUP_LIST'=>'Index,Admin',//开启分组 'DEFAULT_GROUP'

【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇

为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划, 从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记. 有个好的学习计划和思路非常非常重要,非常感谢慕课网提供本套学习计划,希望更多地学习平台能提供像这样全面一条龙学习思路清晰地教程. 计划图:链接 我的学习状况:2015-07-06 10:29:46 开始随记: php工程师学习计划笔记——01 入门必学web基础 htmlcss基础课程 篇 入门篇: text-align:cent

《C++语言导学》小记

我看的这本是Bjarne Stroustrup写的,南开大学的杨巨峰和王刚译的.这本书不适合初学者看,我就是大概翻了翻其中感兴趣的章节. 这本书第14章的标题是“历史和兼容性”,这节内容我看了收获很深.p144-145的内容值得去看. 从中可以看出,ISO C和ISO C++是K&R C [Kernighan, 1978] 的两个主要后代,因此它们是兄弟.两者发展过程中都从经典C继承了关键特性,但又不都是100%兼容经典C. <C++语言导学>p144 2011年,C++11和C11相

Python机器学习入门(1)之导学+无监督学习

Python Scikit-learn *一组简单有效的工具集 *依赖Python的NumPy,SciPy和matplotlib库 *开源 可复用 sklearn库的安装 DOS窗口中输入 pip install ** NumPy(开源科学计算库),SciPy(集成多种数学算法和函数模块)和matplotlib(提供大量绘图工具)库基础上开发的,因此需要先装这些依赖库 安装顺序 SKlearn库中的标准数据集及基本功能 波士顿房价数据集 使用sklearn.datasets.load_bosto

全面系统Python3入门+进阶-1-1 导学

python特点 结束 原文地址:https://www.cnblogs.com/wangjunwei/p/11926946.html

Web前端入门必学知识

入门主要有三个部分   一.html+css部分:      1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易.最 后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览 器,google chrome浏览器.firefox浏览器.safari浏览器

小白入门必学Python基础语法

最近开发中用到Python比较多,所以将Python的基础语法总结出来供Python入门者学习. Unicode Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求.Unicode规定所有的字符和符号最少由16位来表示(2个字节),即:2**16=65536 UTF-8 UTF-8(8-bi