indexedDB数据库的使用

<!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="连接数据库" οnclick="connectDatabase()"><input type="button" value="创建对象仓库" οnclick="CreateObjectStore()"><input type="button" value="保存数据" οnclick="SaveData()"><input type="button" value="读取数据" οnclick="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.οnerrοr=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>

转载于:https://www.cnblogs.com/qfdy123/p/8150972.html

indexedDB数据库的使用相关推荐

HTML5 本地数据库IndexedDB数据库
在HTML 5中,新增一种被称为indexedDB的数据库,该数据库是一种存储在客户端本地的NoSQL数据库. window.indexedDB=window.indexedDB||window.we ...
HTML5 进阶系列：indexedDB 数据库
前言在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
IndexedDB数据库
IndexedDB是一种轻量级的nosql数据库,不需要固定的表结构,通常也不存在连接操作. 在浏览器f12下的application下storage下的indexedDB中 indexDB中包含若干 ...
html5 indexeddb 排序,HTML5 进阶系列：indexedDB 数据库
前言在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
indexedDB数据库使用总结
首发:DoubleFJ の Blog indexedDB简介 indexedDB是一个前端存储数据库,之前也没有什么了解,这次项目中需要用到,然后就去找了相关资料.数据库有两种,一种是关系型数据库,另 ...
使用IndexedDB数据库实现手机通讯录管理功能
** 使用IndexedDB数据库实现手机通讯录管理功能 ** 实现要求 1.创建phoneInfo数据库,创建phone对象仓库,用于保存每个用户的通讯信息. 2.手机通讯信息结构为姓名name.电 ...
html5indexeddb排序,html5的indexedDB数据库操作实例
效果: 代码: StringUtil.js //去除字符串中间空格 String.prototype.Trim = function() { return this.replace(/(^s*)|(s ...
HTML5的IndexedDB数据库
一行代码，搞定浏览器数据库 IndexedDB
作者 | 星尘starx 来源 | https://juejin.cn/post/6918705632757415950 前言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案可 ...

indexedDB数据库的使用

indexedDB数据库的使用相关推荐

最新文章

热门文章