使用HTML5的indexedDB实现的todolist

约定不等于承诺〃 2022-06-11 08:50 203阅读 0赞

不多说，直接上代码

用了bootstrap让页面变得稍微好看一些

<!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>TodoList</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <style> body { padding: 50px; margin: 10px; } #title { font-size: 25px; color: white; } .list-group { padding-top: 30px; } </style>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <form action="javascript:addTodo()" class="row navbar-form">
                        
                        <div class="col-md-offset-2 col-md-2">
                            <div href="#" id="title" class="vertical-center">TodoList</div>
                        </div>
                        <div class="col-md-offset-1 col-md-4 form-group">
                            <input type="text" id="todoText" class="vertical-center form-control" placeholder="please input todos">
                        </div>
                    </form>
                </div>
            </nav>
        </header>
        <section>
            <div class="container">
                <div class="col-md-offset-1 col-md-2">
                    <h3>正在进行:</h3>
                </div>
                <div class="col-md-4">
                    <ul class="list-group" id="todoList">
    
                    </ul>
                </div>
            </div>
            <div class="container">
                <div class="col-md-offset-1 col-md-2">
                    <h3>已经完成:</h3>
                </div>
                <div class="col-md-4">
                    <ul class="list-group" id="hasDoneList">
    
                    </ul>
                </div>
            </div>        
        </section>
    </body>
    <script type="text/javascript" src="js/index.js"></script>
    </html>

js代码写的不多，可能会有不少问题，还请多多指教

var todoStore = 'todos';//存储todolist的表名
    var dbName = 'todolist';//数据库名
    var todoDB = {
        dbName: "todolist",
        version: 1,
        db: null,
    }
    var todo = [];
    
    /** * 初始化 */
    (function init() {
         openDB(todoDB, todoStore);
         //这里是因为打开indexedDB需要一些时间，而且这里是异步的，所以延后一段时间，保证todoDB.db已经赋值成功，或许在openDB中添加回调函数是更好的选择
         setTimeout(function() {
             getData(todoDB.db,todoStore, showData);
         }, 500);
    }());
    
    //向todo添加数据
    var addTodo = function() {
        var text = $("#todoText").val();
        if(text == "") {
            alert("the todo can not be empty!");
        }
        todo.push({
            todotext: text,
            hasdone: false
        });
        $('#todoText').val("");
        addData(todoDB.db, todoStore);
        getData(todoDB.db,todoStore, showData);
    }
    
    /** * 显示数据(用于回调) */
    function showData() {
        todos = request.result;
        var todo = $("#todoList");
        todo.html("");
        var hasdone = $('#hasDoneList');
        hasdone.html("");
        for(let i = 0; i < todos.length; i++) {
            if(!todos[i].hasdone) {
                todo.append("<li class='list-group-item'><a href=\"javascript:void(0)\" onclick=\"doIt(event)\">\ <span class=\"glyphicon glyphicon-check\" aria-hidden=\"true\" value=\"" + i + "\">&nbsp</span></a>"
                + todos[i].todotext + "<a href=\"javascript:void(0)\" onclick=\"removeIt(event)\">\ <span class=\"glyphicon glyphicon-remove pull-right\" aria-hidden=\"true\">&nbsp</span></a></li>");
            } else {
                hasdone.append("<li class='list-group-item'><a href=\"javascript:void(0)\" onclick=\"getBack(event)\">\ <span class=\"glyphicon glyphicon-check\" aria-hidden=\"true\" value=\"" + i + "\">&nbsp</span></a><del>"
                + todos[i].todotext + "</del><a href=\"javascript:void(0)\" onclick=\"removeIt(event)\">\ <span class=\"glyphicon glyphicon-remove pull-right\" aria-hidden=\"true\">&nbsp</span></a></li>");
            }
        }
    }
    /** * 完成一个TODO */
    //
    function doIt(event) {
        var key = event.target.attributes.value.value;
        todos[key].hasdone = true;
        setData(todoDB.db, todoStore, event.target.parentElement.parentElement.innerText.replace(/\s/g,""), todos[key]);
        getData(todoDB.db,todoStore, showData);
    }
    
    /** * 将一个TODO回归 */
    function getBack(event) {
        var key = event.target.attributes.value.value;
        todos[key].hasdone = false;
        setData(todoDB.db, todoStore, event.target.parentElement.parentElement.innerText.replace(/\s/g,""), todos[key]);
        getData(todoDB.db,todoStore, showData);
    }
    
    /** * 删除一个TODO */
    function removeIt(event) {
        var transaction = todoDB.db.transaction(todoStore, 'readwrite');
        var store = transaction.objectStore(todoStore);
        store.delete(event.target.parentElement.parentElement.innerText.replace(/\s/g,""));
        getData(todoDB.db,todoStore, showData);
    }
    
    /** * 获取数据库中的数据 * 如果key为空那么将获取所有的数据 * 使用这个函数来进行数据的显示 */
    function getData(db, storeName, callback, key) {
        var key = key||null;
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        if(key) {
            request = store.get(key);
        } else {
            request = store.getAll();        
        }
        request.onsuccess = function() {
            console.log(request.result);
            callback();
            return request.result;
        }
    }
    
    /** * * @param {*数据库对象} db * @param {*objectStore对象} storeName * @param {*键值} key * @param {*要存的数据} value */
    function setData(db, storeName, key, value) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.put(value);
        /*get(key); request.onsuccess = function() { store.put(value); }*/
    }
    
    /** * 打开数据库 */
    function openDB(myDB, storeName) {
        var version = myDB.version||1;
        var request = indexedDB.open(myDB.dbName, version);
    
        request.onerror = function(e) {
            console.log('open error!');
        }
    
        request.onsuccess = function(e) {
            console.log("success!");
            myDB.db = e.target.result;
        }
    
        request.onupgradeneeded = function(e) {
            var db = e.target.result;
            if(!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, {keyPath:"todotext"});
            }
            console.log(name + 'db version change to ' + version);
        }
    }
    
    /** * 向数据库中添加数据 */
     function addData(db, storeName) {
         var transaction = db.transaction(storeName, 'readwrite');
         var store = transaction.objectStore(storeName);
         for(let i = 0; i < todo.length; i++) {
            var request = store.put(todo[i]); 
         }
        //在每次添加完数据后将todo清空，否则，后果很严重
        todo = [];
     }

效果图：  
![这里写图片描述][SouthEast]  
只实现了最基本的功能，添加，删除要完成的todo

[SouthEast]: /images/20220611/706672ab7d6d4bd6ab0e875606ab95e7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 react 实现 todolist

react 实现 todolist 这次主要是布局方面目录 react 实现 todolist 目录结构 pages/to

蔚落/ 2022年12月11日 07:58/ 0 赞/ 210 阅读

相关 html5 IndexedDB

indexedDB类似nosql的数据库，是面向索引的数据库，相对于web storage，它为web离线存储提供大数据存储和搜索。浏览器兼容性 ![这里写图片描述][2

深碍√TFBOYSˉ_/ 2022年08月21日 04:41/ 0 赞/ 165 阅读

相关 HTML5本地存储——IndexedDB（一：基本使用）

在[HTML5本地存储——Web SQL Database][HTML5_Web SQL Database]提到过Web SQL Database实际上已经被废弃，而HTML5

秒速五厘米/ 2022年08月01日 16:59/ 0 赞/ 178 阅读

相关使用HTML5的indexedDB实现的todolist

不多说，直接上代码用了bootstrap让页面变得稍微好看一些 <!DOCTYPE html> <html lang="en"> <head>

约定不等于承诺〃/ 2022年06月11日 08:50/ 0 赞/ 204 阅读

相关 HTML5本地存储——IndexedDB（一：基本使用）

转载：http://www.cnblogs.com/dolphinX/p/3415761.html 在[HTML5本地存储——Web SQL Database][HTML5_

亦凉/ 2022年06月01日 10:26/ 0 赞/ 194 阅读

相关 IndexedDB的基础使用—数据库的创建

一个IndexedDB数据库可以如下所示创建： let request = indexedDB.open('testDB'); IndexedDB的许多操作都不是“

待我称王封你为后i/ 2022年02月27日 00:32/ 0 赞/ 267 阅读

相关 indexedDB的基础使用—事务

。事务是`indexedDB`数据库中非常重要的一个概念，因为任何对于数据库中数据的读和修改的操作只能在事务中进行。文章目录事务的创建 IDBTrans

待我称王封你为后i/ 2022年02月25日 05:52/ 0 赞/ 272 阅读

相关 indexedDB的基础使用--索引

文章目录索引的创建 createIndex的用法参数说明 IDBIndex 常用方法 \`

快来打我*/ 2022年02月24日 12:12/ 0 赞/ 364 阅读

相关 Notes:indexedDB使用

indexedDB是浏览器端保存结构化数据的一种数据库，类似于mysql,oracle等数据库，但indexedDB使用对象存储数据，而不是用表。 indexedDB是全局的

快来打我*/ 2022年01月06日 00:47/ 0 赞/ 277 阅读

相关 indexedDB的使用

参考链接: [阮一峰解析][Link 1] [indexDB事件详解][indexDB] <html> <head> <me

向右看齐/ 2021年09月01日 03:21/ 0 赞/ 505 阅读