HTML5本地存储之IndexDB

前辈栽的树
web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB

我来纳的凉

打开数据库，在各个浏览器都能运行

window.indexedDB获取IDBFactory，打开数据库的工厂对象，用于创建或打开数据库，并管理数据库版本

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 dbName = 'indexedDBTest';   
    var dbVersion = 20210608;
    var idb;
    var dbConnect = indexedDB.open(dbName , dbVersion);  //一个IDBOpenDBRequest对象
    dbConnect.onsuccess = function(e) {
        idb = e.target.result;  //一个IDBDatabase对象
        alert('数据连接成功')；
    };
    dbConnect.onerror = function(e) {
        alert('数据连接失败');
    };
    dbConnect.onupgradeneeded = function(e) {  //指定版本号大于当前版本，自动更新
        idb = e.target.result;
        var tx = e.target.transaction;  //一个IDBTransaction事务对象
        alert ('数据库版本更新成功，旧的版本号为 ‘ + e.oldVersion + ’, 新的版本号为' + e.newVersion);
        var name = 'Users';
        var optionalParameters = {
              keyPath: 'userId',
              autoIncrement: false
        };
        var store = idb.createObjectStore(name, optionalParameters);  //创建对象仓库，返回一个IDBObjectStore对象
        alert('对象创建成功');
        var name = 'userNameIndex';
        var keyPath = 'userName';
        var optionalParameters = {
              unique: false,  //索引值可以相同
              multiEntry: false  //只能将索引数组整体添加在索引中，若为true，则将其每一个元素添加在索引中
        };
        var idx = store.createIndex(name, keyPath, optionalParameters);
        alert('索引创建成功')；
//事务
        var storeNames = ['Users'];   //使用已建立连接的数据库对象
        var mode = 'readwrite'; //读写事务
        // var mode = 'readonly'; //只读事务
        var tx = idb.transaction(storeNames, mode);  //开启事务，返回一个IDBTransaction对象，此处有一个隐藏的数组，objectStoreNames,由该数据库中所有对象仓库名构成的数组
        //tx.oncomplete事务结束时
        //tx.onabort事务终止时
    };
}

保存数据、获取数据

function connectDatabase() {
    var dbName = 'indexedDBTest';   
    var dbVersion = 20210608;
    var idb;
    var dbConnect = indexedDB.open(dbName , dbVersion);  //一个IDBOpenDBRequest对象
    dbConnect.onsuccess = function(e) {
        idb = e.target.result;  //一个IDBDatabase对象
        alert('数据连接成功')；
        var storeNames = ['Users'];   //使用已建立连接的数据库对象
        var mode = 'readwrite'; //读写事务
        // var mode = 'readonly'; //只读事务
        var tx = idb.transaction(storeNames, mode);
        var store = tx.objectStore('Users');
        var value = {
              userId: 1,
              userName: '张三'，
              address: '住址'
        };
        var req = store.put(value);
        req.onsuccess = function(e) {
               alert('数据保存成功');
        };
        req.onerror = function(e) {
               alert('数据保存失败');
        };
//获取数据
        var requ = store.get(1);
        requ.onsuccess = function(e) {
               if (this.result == undefined) {
                   alert('没有符合条件的数据');
               };else{
                   alert('获取成功，数据名为' + this.result.userName);
               };
        };
        requ.onerror = function(e) {
               alert('数据获取失败');
        };
    };
    dbConnect.onerror = function(e) {
        alert('数据连接失败');
    };