• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5使用indexdb的代码实例分享(图文)

html5使用indexdb的代码实例分享(图文)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,indexdb等相关知识,匿名希望在学习及工作中可以帮助到您

前面说过html5对于离线应用的支持是很好的,不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件,将需要缓存的文件在其中定义,其实html5中还可以使用indexdb,又称索引数据库,该数据库可以用来存储离线对象。下面开始:

请求完成后的回调

所有的请求完成之后都会有一个回调,onsuccess 和onerror,其中:onsuccess表示请求成功时候的回调,onerror 表示请求失败时候的回调。同时还可以使用javascript中的 try/catch来捕获异常,在进一步的处理。

使用数据库

一个数据库一次只能有一个版本,初次创建改数据库的时候版本号是0,当我们需要更改已经创建好的数据库时候,就需要更改其版本号,当更改 版本号的时候,会触发upgradeneeded回调,所以修改数据库或者存储对象的方法必须放到upgradeneeded方法中执行。

判断当前浏览器是否支持indexdb

if (!window.indexedDB) {
    window.alert("您的浏览器不支持indexdb");
}<!--这里indexDB是window对象的属性,类似于alert所以window可以省略-->

创建数据库

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function createDatabase(indexDbName) {
            //调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库,则会创建该数据库
            var openRequest = indexedDB.open(indexDbName);            var db;
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result;//创建数据库成功时候,将结果给db,此时db就是当前数据库
                //alert("this is :"+db);
            };
            openRequest.onupgradeneeded = function (evt) {//更改数据库,或者存储对象时候在这里处理

            };
        }    </script></head><body>
    <a href="javascript:createDatabase('firstdb')">createDatabase</a></body></html>

上面这段代码可以创建一个数据库到客户端。
这里写图片描述

删除数据库

通过调用 deleteDatabase 方法,并且传入需要删除的数据库名称来删除现有数据库。

function deleteDatabase(indexDbName) {
    var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
    deleteDbRequest.onsuccess = function (event) {
        console.log("detete database success");
    };
    deleteDbRequest.onerror = function (e) {
        console.log("Database error: " + e.target.errorCode);
    };
}

存储数据

objectstore

在indexdb中没有表的概念,而是使用objectstore来存储对象的,一个数据库中可以包含多个objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore可以存储的数据结构也有差异

事物

在更新数据库内容或者插入新的数据时候,需要首先开启到事物,并且需要制定当前事物操作了那些objectstore。

事务具有三种模式

  • 只读:read,不能修改数据库数据,可以并发执行

  • 读写:readwrite,可以进行读写操作

  • 版本变更:verionchange

因为对新数据的操作都需要在transaction中进行,而transaction又要求指定object store,所以我们只能在创建数据库的时候初始化object store以供后面使用。

指定keyid添加数据

指定keyid,可以理解为指定一个主键

//添加数据
        function insertAnObj(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,1);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",'readwrite'); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候,就创建userinfo相关的objectstore,以供后面添加数据时候使用
                if(!db.objectStoreNames.contains('userinfo')){                    
                //keyPath:Javascript对象,对象必须有一属性作为键值
                    db.createObjectStore('userinfo',{keyPath:"id"});
                }

            }
}

这里写图片描述

使用autoIncrement添加数据

指定autoIncrement,可以理解为指定了一个主键自动增长。

//指定主键自动增长
        function insertAutoInc(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,2);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",'readwrite'); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(even
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03微信浏览器取消缓存的方法
  • 2017-08-06浅谈Html5中视频 音频标签 进度条的问题
  • 2018-12-03jQuery Validation的使用详解
  • 2018-12-03详解H5 活动页之移动端 REM 布局适配方法
  • 2018-12-03HTML5 CANVAS:绘制路径
  • 2018-12-03关于网络画板的10篇文章推荐
  • 2017-08-06HTML5单页面手势滑屏切换原理
  • 2018-12-03小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)
  • 2018-12-03详细介绍通过HTML5的Drag和Drop生成拓扑图片Base64信息的案例
  • 2018-12-03零基础学习HTML5

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5网站开发专用基础模板
    • hwSlider-内容滑动切换效果(二):响应式可触控滑动
    • HTML5实现斯诺克桌球俱乐部的示例代码(图)
    • HTML5的表单(绝对特别强大的功能)使用示例
    • HTML 5 游戏是否有存在的必要?
    • HTML5 Canvas绘图使用详解
    • 简单介绍HTML5中audio标签的使用
    • Html5 Canvas初探学习笔记(2) -绘制深入
    • H5的CanvasAPI怎样绘制图形
    • HTML5初级知识总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有