<!DOCTYPE html>

<html>

    <head>

        <title>indexedDB数据库的使用</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <input type="button" value="连接数据库" onclick="connectDatabase()">

        <input type="button" value="创建对象仓库" onclick="CreateObjectStore()">

		<input type="button" value="保存数据" onclick="SaveData()">

		<input type="button" value="读取数据" onclick="GetData()">

        <script>

            window.indexedDB=window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB||window.msIndexedDB;

        window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction;

        window.IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange;

        window.IDBCursor=window.IDBCursor||window.webkitIDBCursor||window.msIDBCursor;

          //连接数据库

 function connectDatabase(){

 var request = indexedDB.open('dbName', 1);  // 打开 dbName 数据库

request.onerror = function(e){              // 监听连接数据库失败时执行

    console.log('连接数据库失败');

}

request.onsuccess = function(e){            // 监听连接数据库成功时执行

    console.log('连接数据库成功');

         }

            }

function CreateObjectStore(){

    var request = indexedDB.open('dbName', 3);

    request.onupgradeneeded = function(e){

    var db = e.target.result;

    var store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});

    console.log('创建对象仓库成功');

            }

          }

 function SaveData(){

var request = indexedDB.open('dbName', 5);

request.onsuccess = function(e){

    var db = e.target.result;

    var tx = db.transaction('Users','readwrite');

    var store = tx.objectStore('Users');

    var value = {

        'userId': 1,

        'userName': 'linxin',

        'age': 24

    }

    var req = store.put(value);

    req.onsuccess=function(){

      console.log("数据保存成功");

         }

        req.onerror=function(){

                 console.log("数据保存失败");

                    }

            }

}

function GetData(){

  var request = indexedDB.open('dbName', 6);

request.onsuccess = function(e){

    var db = e.target.result;

    var tx = db.transaction('Users','readwrite');

    var store = tx.objectStore('Users');

    var range = IDBKeyRange.bound(0,10);

    var req = store.openCursor(range, 'next');

    req.onsuccess = function(){

        var cursor = this.result;

        if(cursor){

            console.log(cursor.value.userName);

            cursor.continue();

        }else{

            console.log('检索结束');

        }

    }

}

}

        </script>

    </body>

</html>

　　

indexedDB数据库的使用的更多相关文章

  1. HTML5 indexedDB数据库的入门学习（二）

    上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...

  2. HTML5 indexedDB数据库的入门学习（一）

    笔者早些时间看过web sql database,但是不再维护和支持,所以最近初步学习了一下indexedDB数据库,首先indexedDB(简称IDB)和web sql database有很大的差别 ...

  3. HTML5 进阶系列：indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  4. HTML indexedDB数据库—简单示例

    indexedDB数据库的基本概念:在HTML5中,新增一种被称为"indexedDB"的数据库,该数据库是一种存储在客户端本地的NoSQL数据库. <!DOCTYPE ht ...

  5. HTML5 indexedDb 数据库

    indexedDb 数据库   上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...

  6. indexedDB数据库创建

    1.首先需要使用使用indexedDB.open()方法,打开数据库 2.通过createObjectStore方法创建表, 创建表之后, 这个表通过createIndex方法创建索引 3.通过tra ...

  7. 前端的数据库：IndexedDB 。 ps：入门

    应用程序需要数据.对大多数Web应用程序来说,数据在服务器端组织和管理,客户端通过网络请求获取.随着浏览器变得越来越有能力,因此可选择在浏览器存储和操纵应用程序数据. 本文向你介绍名为IndexedD ...

  8. 浏览器本地数据库 IndexedDB 基础详解

    一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...

  9. 前端数据库——WebSQL和IndexedDB

    一.WebSQL WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少使用.并且,当前只有谷歌支持,ie和火狐均不支持. 我们对数据库的一般概念是后端才会跟 ...

随机推荐

  1. 一图看懂Actor Typed

    引言 朋友看罢我之前整理的<Akka Typed 官方文档之随手记>,一人用了诗歌<长城长>作为回赠,另一人则要求推出简化版本.于是抽空整理了几张思维导图,并且用了一些不太恰当 ...

  2. keycloak集成微信登陆~解决国内微信集成的问题

    之前看了国内写的微信集成keycloak的文章,然后拿来就用了,但我的是jboss部署的keycloak,然后使用他的包之后,会出现类无法找到的问题,之后找了很多资料,多数都是国外的,在今天终于找到了 ...

  3. 关于vuex的数据不直接给data而要通过computed

    # 为什么vuex的数据不直接给data而要通过computed计算 ## 疑惑 其实一直以来使用vue的状态管理vuex都有一个疑惑,文档中介绍,vue的状态数据`$store.state.xx`的 ...

  4. 【Docker】CentOS7 上无网络情况下安装

    自建虚拟机,但是连接不上网络,只能通过下载rpm包进行安装docker 环境:CentOS 7.3.1611 x64 rpm镜像下载地址用的阿里的https://mirrors.aliyun.com/ ...

  5. MySQL全面瓦解18：自定义函数

    定义 我们之前学习了MySQL的内置函数,非常丰富,满足了我们对数据操作的大部分需求. 但是如果有一些复杂的业务逻辑在数据库层面就可以完成,无需在程序层面完成的时候,这时候就可以写成MySQL自定义函 ...

  6. web dynpro配置注意事项

    如果你想使用web dynpro 开发的应用,但是发现浏览器报错,那么你按照下面的步骤逐一进行检查吧.特别是返回的500错误,或者是你发现浏览器的地址栏中以http://<hostname> ...

  7. windows_myql 安装与卸载详细讲解,

    windows_myql 安装 注意: 安装前把 所有杀毒软件,安全卫士等关闭. 打开下载的mysql安装文件双击解压缩,运行"mysql-5.5.40-win64.msi". 注 ...

  8. Py第一次练习，第二次练习

    有两个列表      l1 = [11,22,33]        l2 = [22,33,44] 1.获取内容相同的元素列表2.获取l1中有l2中没有的元素列表3.获取l1和l2中不同的元素列表 l ...

  9. MAX232数据方向

    在调试一个新板子的时候,串口调试从来都是放在前面的,而由于是一个新板子,电路图也是新的,因此有时候不知道串口线结对了没有,这个时候可能会对照PCB和原理图去看一下,但有时候看的人会很迷糊,因为不同的人 ...

  10. JVM学习-运行时数据区域

    目录 前言 运行时数据区 程序计数器 Java虚拟机栈 局部变量表 基础数据类型 对象引用 returnAddress 操作数栈 动态链接 方法返回地址 Java堆 方法区 类型信息 字段描述符 方法 ...