indexedDB的基本使用

来源：互联网发布：自导自演周杰伦知乎编辑：程序博客网时间：2024/05/16 16:57

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();})();

阅读全文

0 0