indexedDB的基本使用

时间：2021-04-16 10:54:09

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!--创建一个容器-->
<div class="addNoteView">
<input type="text" placeholder="标题">
<textarea name="" id="" cols="30" rows="10" placeholder="正文"></textarea>
<div class="addButton">保存</div>
</div>
<!--<div class="showNote">-->
 <!--<div class="noteListView"></div>-->
 <!--<div class="noteContentView"></div>-->
<!--</div>-->

<div class="noteList">
<h2>日记列表</h2>
</div>

<script src="app.js"></script>
</body>
</html>

style.css代码：

 
*{
margin: 0;
padding: 0;
}

.addNoteView input,.addNoteView textarea{
display:block ;
padding: 10px 30px;
}

.addNoteView{
width: 80%;
margin: 0 auto;
}
.addNoteView input{
height: 44px;
width: 100%;
}
.addNoteView textarea{
height: 200px;
width: 100%;
}
.addButton{
width: 50%;
margin: 0 auto;
height: 35px;
background-color: #3e3aff;
border: none;
margin-top: 100px;
text-align: center;
line-height: 35px;
}
.noteList{
width: 80%;
margin:0 auto;
height:200px;
border: 1px solid #000;
margin-top: 20px;
}
.noteList h2{
text-align: center;
}

app.js代码：

 

(function () {

//创建数据库对象
 var database=null;
// 创建、打开数据库
 function openDB() {
// open(数据库名字，版本号)
 var request=indexedDB.open("noteDB",4);
// 错误提示
 request.onerror=function (error) {
console.log(error)
        };
// 数据库打开成功
 request.onsuccess=function () {
console.log("打开数据库成功");
// 定义数据库对象
 database=this.result;
        };
// 更新数据库 只在数据库版本号不相同时调用
 request.onupgradeneeded=function () {
// 在建表的时候 不需要每一次都创建

 console.log("更新数据库成功",this);
// 获得到数据库对象IDBDatabase
 var db=this.result;
// 设置表名
 var tableName="note";
// contains()判断数据库里是否有note这个表名
 if(!db.objectStoreNames.contains(tableName)){
// 建表
 var objectStore=db.createObjectStore(tableName,{keyPath:"date"});
// 创建表里面的字段 需要 至少传入两个参数
 // createIndex(字段的名字，该字段对应的内容)
 objectStore.createIndex("title","title");
objectStore.createIndex("content","content");
objectStore.createIndex("date","date");
            }
        };
    }

// 添加数据的方法
 function addData(info) {
// 获得事务得对象
 var transaction=database.transaction(["note"],"readwrite");
// 存放某一种类型的容器
 var objectStore=transaction.objectStore("note");
// 添加数据
 objectStore.add(info);

    }
// 获得数据方法
 function getData(callback) {
// 获得事务得对象
 var transaction=database.transaction(["note"],"readwrite");
// 存放某一种类型的容器
 var objectStore=transaction.objectStore("note");
// 获取数据方法(此处只通过keypath获取对应的一条数据)
 var getData=objectStore.get(1502184923387);
// 把结果放入回调函数中 方便使用
 callback(getData);
    }
// 删除数据方法
 function deleteData() {
// 获得事务得对象
 var transaction=database.transaction(["note"],"readwrite");
// 存放某一种类型的容器
 var objectStore=transaction.objectStore("note");
// 删除数据(此处只通过keypath删除对应的一条数据)
 objectStore.delete(1502184923387);
    }

// 把输入的内容存储到浏览器中的方法
 function loadView() {
var titleInput=document.querySelector(".addNoteView input");
var contentInput=document.querySelector(".addNoteView textarea");
var saveButton=document.querySelector(".addButton");
saveButton.onclick=function () {
var title=titleInput.value;
var content=contentInput.value;
var timeStamp=new Date().getTime();
// 调用添加数据方法，传入字面量对象
 addData({
title:title,
content:content,
date:timeStamp
            });
// 调用获取数据方法，获取数据
 getData(function (data) {
console.log(data);
            });
deleteData();
        }

    }

// 初始化函数
 function init() {
// 判断如果浏览器不支持indexedDB则跳出不执行
 if(!indexedDB){
return;
        }


openDB();
loadView();
    }

init();

})();
标签：

相关文章