LocalStorage 与 IndexedDB 区别也适用场景
LocalStorage 是用 key-value 键值模式存储数据，它存储的数据都是字符串形式。如果你想让 LocalStorage存储对象，你需要借助 JSON.stringify()能将对象变成字符串形式，再用 JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的，所以它的 api 设计为同步的。
IndexedDB 很适合存储大量数据，它的 API 是异步调用的。IndexedDB 使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。IndexedDB 比 localstorage 强大得多，但它的 API 也相对复杂。对于简单的数据，你应该继续使用 localstorage，但当你希望存储大量数据时，IndexedDB 会明显的更适合，IndexedDB 能提供你更为复杂的查询数据的方式
//需要存储的数据列表 可以从后台先请求
//ajax 第一次从后台返回的数据结果
let ajaxData={
user:[
{name:"aax",age:18,phone:"158264634852"},
{name:"bbx",age:8,phone:"146846156516"},
{name:"bx",age:108,phone:"158332553255"}
],
news:[
{
title:"县人大常委会将对国庆三个县 级开展工作评议",
addr:"郫都区",
time:"2019-07-29",
img:["../static/images/pics1.png"],//组件内动态绑定的路径是在运用当前组件内开始寻找
id:"110",
sharelinks:""
},
{
title:"县人大常委会将对国庆三个县 级开展工作评议",
addr:"郫都区",
time:"2019-07-29",
img:["../static/images/pics1.png"],//组件内动态绑定的路径是在运用当前组件内开始寻找
id:"111",
sharelinks:""
},
{
title:"县人大常委会将对国庆三个县 级开展工作评议",
addr:"郫都区",
time:"2019-07-29",
img:["../static/images/pics1.png"],//组件内动态绑定的路径是在运用当前组件内开始寻找
id:"112",
sharelinks:""
}
],
chart:[1,2,3]
}
//数据库相关信息
var dbInfo = {
dbName:"DataBase",//数据库名
dbVersion: 2070,//数据库版本
dbInstance: {//需要创建的事务中的仓库名
user:"user",
news:"news",
chart:"chart"
}
};
//indexedDB 兼容处理
window.onload = function(){
justifyIndexDEB();//判断是否支持indexedDB执行下面函数
}
function justifyIndexDEB(){
if("indexedDB" in window) {
// 支持
console.log(" 支持indexedDB...");
createindexDB();//创建数据库，接下来我们就到这里来了嘛
} else {
// 不支持
console.log("不支持indexedDB...");
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
}
/**
* 创建数据库
* @param dbName [数据库] 接收数据库名
* @param dbVersion [版本号] 接收一个数据库版本号 必须为整数
* @param dbInstance [表名集合] 当前需要添加或者创建的事务中的仓库（表名）
*/
function createindexDB(){
//1 通过接口的open方法打开一个indexedDB的数据库实例
var openRequest =window.indexedDB.open(dbInfo.dbName,dbInfo.dbVersion);
//2 对打开数据库的事件进行处理
// 第一次打开成功后或者版本有变化自动执行以下事件：一般用于初始化数据库。
//如果要修改数据库（+/-表 索引 主键）只能通过升级DB版本完成。
openRequest.onupgradeneeded = function(e) { //第一次打开数据库 ^-*
console.log("第一次打开该数据库，或者数据库版本发生变化....");
var db = e.target.result;//获得数据库
//如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
//创建数据库的表格（或者叫数据库仓库）
//指定需要被索引的字段及他的值是否时候唯一性 无主键
//createstoreNames(db,dbInfo.dbInstance.user,Object.keys(ajaxData.user[0]))
createstoreNames(db,dbInfo.dbInstance.user,[{name:"name",unique:true},{name:"age",unique:false}])
//当前id为主键
//createstoreNames(db,dbInfo.dbInstance.news,[{name:"id",unique:true},{name:"time",unique:false},{name:"addr",unique:false}],"id")
}
// 打开数据库成功后，自动调用onsuccess事件回调。
//可以通过函数来控制 //注意一个事务只能控制一条数据的增删改查
openRequest.onsuccess = function(e) { //success：打开成功^-^
console.log("数据库打开成功...");
// 获取到 demoDB对应的 IDBDatabase实例,也就是我们的数据库
var db = e.target.result;
//3 indexedDB 的增删改查的操作需要放到一个事务中进行（推荐）
//读取数据
// for(let i=0;i<ajaxData.user.length;i++){
// get_data(db,dbInfo.dbInstance.user,i);
// }
//数据库中添加数据
let addData=true ///控制添加数据
if(addData){
for(let i=0;i<ajaxData.user.length;i++){//添加表名为user 的数据
add_data(db,dbInfo.dbInstance.user,ajaxData.user[i])
}
// for(let i=0;i<ajaxData.news.length;i++){//添加表名为news 的数据
// add_data(db,dbInfo.dbInstance.news,ajaxData.news[i])
// }
}
raverse_data(db,dbInfo.dbInstance.user); //遍历数据
//raverse_data(db,dbInfo.dbInstance.news); //遍历数据
}
//打开数据库失败
openRequest.onerror = function(e) { //error：打开失败*-*
console.log("数据库打开失败...");
console.dir(e);
}
}
/**
* 添加仓库列表到数据库
* @param db [数据库]
* @param storename [需要添加的仓库名]
* @param [...createIndexArr] [当前仓库名那些字段需要别索引]
* @param isKey [当前是否需要自定义主键] 默认为false 不传值获取传空就说明当前仓库没有合适的主键名 穿值就以值为主键
*/
function createstoreNames(db,storename,createIndexArr,isKey=false){
var storeNames = db.objectStoreNames;//获得数据库表名列表
if(!storeNames.contains(storename)){
//当前表名如果有主键则直接用该主键
//当前表名如果没有主键那么用自定义主键，并且自增
let objectStore=null;
if(!isKey){//当前没传主键
objectStore=db.createObjectStore(storename,{
keyPath:storename+"IndexedDBId",
autoIncrement:true
})
}else{
objectStore=db.createObjectStore(storename,{
keyPath:isKey
})
}
/* @param
* unique 当前字段是否唯一看具体情况先不写 都是不唯一的 免得添加数据失败
*/
for (let i = 0; i < createIndexArr.length; i++) {
//指定可以被索引的字段，unique字段是否唯一。类型： IDBIndex 坑
objectStore.createIndex(createIndexArr[i].name,createIndexArr[i].name, {unique: createIndexArr[i].unique});
}
}
}
/**
* 添加数据
* @param db [数据库] 接收数据库名
* @param storename [名称] 接收一个数据库里的仓库名
* @param data [值] 接收一个数组对象
*/
function add_data(db,storename,dataobj){
//创建一个事务处理添加数据 如果不创建默认只读
var trans = db.transaction(storename,"readwrite");//readwrite 可读写
// 通过事务来获取IDBObjectStore
var store = trans.objectStore(storename);
//单独添加
var addPersonRequest=store.add(dataobj)
// 监听添加成功事件
addPersonRequest.onsuccess = function(e) {
// console.log("数据添加成功主键为："+e.target.result); // 打印添加成功数据的 主键（id）
//可以根据id来查找数据库的数据+
};
// 监听失败事件
addPersonRequest.onerror = function(e) {
console.log("数据添加异常:"+e.target.error);
};
}
/**
* 按key获取数据
* @param db [数据库] 接收数据库名
* @param storename [名称] 接收一个数据库里的仓库名
* @param data [值] 接收一个数组对象
*/
function get_data(db,storename,keyid){
//创建一个事务处理读取数据
var transaction = db.transaction(storename, 'readwrite');
// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(storename);
//查询数据 根据id查询值
var getdata=store.get(keyid+1) //值为 key 主键的值 key是从1开始的
getdata.onsuccess = function(e) {
if (getdata.result) {
console.log("查询key为"+(keyid+1)+"的值为："+JSON.stringify(getdata.result) );//获得需要查询的数据
} else {
console.log('未获得数据记录');
}
};
}
/**
* 便利数据
* @param db [数据库] 接收数据库名
* @param storename [名称] 接收一个数据库里的仓库名
*/
function raverse_data(db,storename){
//创建一个事务处理读取数据
var transaction = db.transaction(storename, 'readwrite');
// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(storename);
//查询数据 查询所有该表所有数据
var result=[]
store.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
// console.log('Name: ' + cursor.value.name);
result.push(cursor.value)
cursor.continue();//继续下一个
} else {
// 如果全部遍历完毕...
console.log('没有更多数据了！查询到表名为'+storename+"的所有数据列表：");
console.log(result)
}
}
}
// del_data(db); //数据库中删除数据 包括表
// update_data(db);//更新数据（类似于Add方法）
function deletedb(dbname) {
var self = this;
self.indexedDB.deleteDatabase(dbname);
console.log(dbname + '数据库已删除')
}
扫一扫
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
