indexdb使用demo

最新推荐文章于 2025-03-26 23:38:53 发布

zfl092005

最新推荐文章于 2025-03-26 23:38:53 发布

阅读量636

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/zfl092005/article/details/81381879

版权

js 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function createDatabase(indexDbName) {
//调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库，则会创建该数据库
var openRequest = indexedDB.open(indexDbName);
           var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result;//创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
};
openRequest.onupgradeneeded = function (evt) {//更改数据库，或者存储对象时候在这里处理

};
}

function deleteDatabase(indexDbName) {
var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
deleteDbRequest.onsuccess = function (event) {
console.log("detete database success");
};
deleteDbRequest.onerror = function (e) {
console.log("Database error: " + e.target.errorCode);
};
}

//添加数据
function insertAnObj(indexDbName) {
   var userinfos=[{
                       id:1001,
                       name:"小李",
                       age:24
                   },{
                       id:1002,
                       name:"老王",
                       age:30
                   },{
                       id:1003,
                       name:"王麻子",
                       age:26
                   }];
                   var openRequest = indexedDB.open(indexDbName,1);
   openRequest.onerror = function(e) {//当创建数据库失败时候的回调
       console.log("Database error: " + e.target.errorCode);
   };
   openRequest.onsuccess = function(event) {
       console.log("Database created");
       db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
       //alert("this is :"+db);
       //打开和userinfo相关的objectstore的事物
       var transaction = db.transaction("userinfo",'readwrite');
       var store=transaction.objectStore("userinfo");
       for(var i=0;i<userinfos.length;i++){
       //alert("add"+userinfos[i]);
           store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
       }
   };
   openRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
   //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
       if(!db.objectStoreNames.contains('userinfo')){
       //keyPath:Javascript对象，对象必须有一属性作为键值
           db.createObjectStore('userinfo',{keyPath:"id"});
       }
   }
}

//指定主键自动增长
function insertAutoInc(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,2);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i<userinfos.length;i++){
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象，对象必须有一属性作为键值
db.createObjectStore('userinfo',{autoIncrement: true});
}
}
}

function deleteAllData(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
objectStore.clear();
}
}
   </script>
</head>
<body>
<a href="javascript:createDatabase('firstdb')">createDatabase</a><br/>
   <a href="javascript:deleteDatabase('firstdb')">deleteDatabase</a></br/>
   <a href="javascript:insertAnObj('firstdb')">insertAnObj</a></br/>
   <a href="javascript:insertAutoInc('firstdb')">insertAutoInc</a></br/>
   <a href="javascript:findDbdata('firstdb','3')">findDbdata</a></br/>
   <a href="javascript:findAllDbdata('firstdb')">findAllDbdata</a></br/>
   <a href="javascript:deleteDataById('firstdb','6')">deleteDataById 6</a></br/>
   <a href="javascript:deleteAllData('firstdb')">deleteAllData</a></br/>
</body>
</html>