前端浏览器数据库indexedDB入门教程

概要

最近在刷红宝书的时候发现indexedDB部分的讲解有点混乱，且书上的用法和目前网上教程的用法差距还是蛮大的，读起来可能不是很好懂，他别是setVersion（）方法，我写了半天也用不了，上网查询之后request = indexedDB.open("admin",17);打开数据库的同时就可以创建版本号了。

indexedDB

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。
IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。

使用教程

第一步检查你的浏览器是否支持该数据库
let indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null;
if(indexedDB){
console.log(“yes”)
}else{
console.log(“yes”)
}
检查
前端浏览器数据库indexedDB入门教程
然后打开数据库，设置版本号，并在全局或者局部环境下设置些需要的变量备用
request表示请求，db表示database数据库，objectStore将会是一个存储空间变量

 let request ,db,objectStore; 
request = indexedDB.open("admin",17);

请求连接indexedDB后会有三个方法onerror、onsuccess、onupgradeneeded，分别会在打开失败、打开成功以及版本更新时调用，以此我们可以用来测试数据库是否连接成功。（注意版本更新过后如果版本号没有增加是不用再调用onupgradeneeded的）

request.onerror = function (event) {
    alert("错误");
};
request.onsuccess = (event)=>{
    alert("成功");
    db = event.target.result;//获取结果
};

request.onupgradeneeded = function(event){
    db = event.target.result;
    alert("版本更新");
};

前端浏览器数据库indexedDB入门教程
到这里之后就可以开始使用indexedDB了。版本更新之后，我们可以创建一个新的存储空间，这里名为users，设置主键keyPath：“username”，Auto-increment 会在新记录插入表中时生成一个唯一的数字。
再调用objectStore.createIndex('firstName', 'firstName', {unique: false});来增加索引，store.createIndex 方法接收三个参数，第一个为索引名，第二个为数据对象的属性，第三个参数为可选参数，值为一个js对象。该对象中的 unique 属性为 true，代表索引值不可以相同，即两条数据的 firstName 不可以相同，为 false 则可以相同。

            request.onupgradeneeded = function(event){
                db = event.target.result;alert(db.version);
                alert("版本更新");
                if(!db.objectStoreNames.contains("users")) {
                    objectStore = db.createObjectStore("users", {keyPath: "username",autoIncrement: false});
                    console.log("我需要创建一个新的存储对象");
                    objectStore.createIndex('firstName', 'firstName', {unique: false});
                    objectStore.createIndex('lastName', 'lastName', {unique: false});
                }
            };

检查一下（顺便在开发者工具里检查下自己的objectStore是否出现了）
前端浏览器数据库indexedDB入门教程

之后就可以愉快的开始使用indexedDB，使用之前我们得先创建一个事务，indexedDB的数据增删改查都需要通过事务来做。

var transaction = db.transaction("users", 'readwrite');
//创建事务，定义为读写方式，”user“部分可以改成一个数组添加多个   
objectStore = transaction.objectStore("users");//访问特定的存储空间

之后用add()方法就可以给存储空间添加一个对象，完整代码如下

        let indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null;
        request = indexedDB.open("admin",1);
        //设置版本号
        request.onerror = function (event) {
            alert("错误");
        };
        request.onsuccess = (event)=>{
            alert("成功");
            db = event.target.result;//获取结果
            var user = {
                username:"007",
                firstName:"janmes",
                lastName:"bond",
                password:"foo"
            };
            var transaction = db.transaction("users", 'readwrite');
            objectStore = transaction.objectStore("users");
            objectStore.add(user);
        };

        request.onupgradeneeded = function(event){
            db = event.target.result;alert(db.version);
            alert("版本更新");
            if(!db.objectStoreNames.contains("users")) {
                objectStore = db.createObjectStore("users", {keyPath: "username",autoIncrement: false});
                console.log("我需要创建一个新的存储对象");
                objectStore.createIndex('firstName', 'firstName', {unique: false});
                objectStore.createIndex('lastName', 'lastName', {unique: false});
            }
        };

检查下数据库的内容
前端浏览器数据库indexedDB入门教程

这样就成功了！另外还有 get()、put()、delete()甚至是openCursor()方法，用法和add()差不了太多，使用也比较简单，可以自行百度。是刚开始使用数据库连接数据库的部分比较容易踩坑，所以就写了这篇博文给大家，希望大家喜欢。

前端浏览器数据库indexedDB入门教程

概要

indexedDB

使用教程

相关推荐