浅谈浏览器本地存储-indexedDB

indexedDB 是 HTML5 提供的一种本地存储，一般用户保存大量用户数据并要求数据之间有搜索需要的场景,当网络断开的时候，可以做一些离线应用，它比 SQL 方便，不用去写一些特定的语句对数据进行操作，数据格式为 json。

步骤：

1. 创建数据库，并指定数据库的版本号

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open(databasename, version);
request.onerror = function(e){
    // 创建失败回调函数
};
request.onsuccess = function(e){
    // 创建成功回调函数
};
request.onupgradeneededd = function(e){
    // 当数据库改变是回调函数
};
复制代码

注意这里的版本号只可以是整数

2. 建立对象存储空间

request.onupgradeneeded = function(event) { 
  var db = event.target.result;
  var objectStore = db.createObjectStore("name", { keyPath: "id" });
};
复制代码

3. 数据的增、删、改、查

// 增
addData:function(db,storename,data){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
    for(var i = 0 ; i < data.length;i++){
        request = store.add(data[i]);
        request.onerror = function(){
            console.error('add添加数据库中已有该数据')
        };
        request.onsuccess = function(){
            console.log('add添加数据已存入数据库')
        };
    }

}
复制代码

添加数据，重复添加会报错

// 删
deleteData:function(db,storename,key){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename);
    store.delete(key)
    console.log('已删除存储空间'+storename+'中'+key+'记录');
}
复制代码

// 改
putData:function(db,storename,data){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
    for(var i = 0 ; i < data.length;i++){
        request = store.put(data[i]);
        request.onerror = function(){
            console.error('put添加数据库中已有该数据')
        };
        request.onsuccess = function(){
            console.log('put添加数据已存入数据库')
        };
    }
}
复制代码

重复添加已经存在的数据会更新原有数据

// 查
getDataByKey:function(db,storename,key){
    var store = db.transaction(storename,'readwrite').objectStore(storename);
    var request = store.get(key);
    request.onerror = function(){
        console.error('getDataByKey error');
    };
    request.onsuccess = function(e){
        var result = e.target.result;
        console.log('查找数据成功')
        console.log(result);
    };
}
复制代码

根据存储空间的键找到对应数据，本例为 id

4. 关闭数据库

db.close();
复制代码

2.使用场景

掌握了使用步骤之后，我们来结合它的优、缺点谈谈其使用场景。

• 不适合过大的数据存储，浏览器对 indexDB 有 50M 大小的限制
• 不适合对兼容性要求高的项目
• 不适合存储敏感数据
• 当用户清除浏览器缓存的时候可能出现问题
• indexedDB 受到同源策略的限制

参考: indexedDB API