<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="createDatabase('Users')">Create Database</button>
<button onclick="deletedatabase('Users')">delet Database</button>
<button onclick="getDatabase('Users')">get Database</button>
<p id="display"></p>
<script>
var users = [
{
username: "这是name1",
title: "这是title1",
body:"这是body2"
},
{
username: "这是name2",
title: "这是title2",
body:"这是body2"
}
]; //假设这个object用来保存的
let db;
let request;
let store;
function createDatabase(dbName) {
//第一个参数为名字，第二个参数为版本号
request = indexedDB.open(dbName, 1);
request.onerror = function () {
alert("fail to open datbase with:" + event.target.message);
}
//如果尝试更新版本时，其他页面正在使用数据库也会出现问题
request.onblocked = function () {
alert('请关闭其他浏览器后在尝试');
}
request.onsuccess = function (event) {
alert("success open the database!");
db = event.target.result;
db.onversionchange = function () {
//只有当浏览器中只有一个标签使用数据库时，调用setVersion才能完成操作
//其他页面正在操作时最好关闭数据库
db.close();
}
//创建事务，传入['users']代表只加载users存储空间
let transaction = db.transaction(["users"], "readwrite");
//创建事务后使用objectStore()传入存储空间名称就可以访问特定名称的存储空间
let objectStore = transaction.objectStore("users");
//添加数据
for(const user of users){
objectStore.add(user);
}
}
request.onupgradeneeded = function (event) {
alert("version Change");
db = event.target.result;
store = db.createObjectStore("users", {
keyPath: "username",
autoIncrement: false
});
// store.createIndex("director", "director", { unique: false });
}
}
//创建游标形式获取
function getCursorData(dbName) {
request = indexedDB.open(dbName, 1);
request.onerror = function () {
alert("fail to open datbase with:" + event.target.message);
}
request.onsuccess = function (params) {
let db = event.target.result;
let transaction = db.transaction(["users"]);
let objectStore = transaction.objectStore("users");
//创建游标
request = objectStore.openCursor();
request.onsuccess = function (event) {
//获取游标
let cursor = event.traget.result;
let value = '',updateRequest = null;
if(cursor){
if(cursor.key === '这是name1'){
value = cursor.value;
value.body = '这是要更新的值';
request = cursor.update(value);
// 删除数据
// request = cursor.delete();
updateRequest.onsuccess = function () {
alert('更新成功');
// cursor.continue();//跳到下一个，可以传入参数跳到指定键的位置
// cursor.advance(5);//向前移动五项
}
updateRequest.onerror = function () {
alert('更新失败');
}
}
}
}
request.onerror = function (params) {
alert('创建游标失败');
}
}
}
function deletedatabase(dbName) {
try {
indexedDB.deleteDatabase(dbName);
} catch (e) {
alert(e.getMessage);
}
}
function getDatabase(dbName) {
request = indexedDB.open(dbName, 1);
request.onerror = function () {
alert("fail to open datbase with:" + event.target.message);
}
request.onsuccess = function (params) {
db = event.target.result;
let transaction = db.transaction(["users"]);
let objectStore = transaction.objectStore("users");
//创建完成使用get获取**************************
request = objectStore.get('这是title1')
request.onsuccess = function (event) {
const result = event.target.result;
document.querySelector('#display').innerHTML =
`username:${result.username}<br>
title:${result.title}<br>
body:${result.body}<br >
`
}
}
}
</script>
</body>
</html>
来源：CSDN
作者：forcehack
链接：https://blog.csdn.net/qq_36754767/article/details/104117300