ToDoList本地存储原生js版/jQuery版

最新推荐文章于 2023-08-18 01:46:09 发布

m0_71221890

最新推荐文章于 2023-08-18 01:46:09 发布

阅读量217

点赞数

分类专栏： js todolist localStorage 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_71221890/article/details/125465092

版权

以下是简易版的todolist小案例，用到了本地存储，所以关闭页面，下次打开内容也还是在的，可以用来记录待办事项和已经完成的事项;

localStorage使用的注意事项：获取里面的数据时使用JSON.parse(data)，把里面拿到的数据转换成我们可以看懂的对象；但是我们要对本地数据进行修改时，又要把数据转变成本地存储能识别的数据，就要用到JSON.stringfy(obj)；

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="todo.css">
    <script src="todooriginjs.js"></script>
</head>
<body>
    <header>
        <div class="head w">
            <h1>ToDoList</h1>
            <input type="text" placeholder="添加ToDo" id="todo">
        </div>
    </header>
    <div class="w" id="doing">
        <div class="top">
            <h2>正在进行</h2>
            <span class="doingNum"></span>
        </div>
        <ul class="doing"></ul>
    </div>
    <div class="w" id="done">
        <div class="top">
            <h2>已经完成</h2>
            <span class="doneNum"></span>
        </div>
        <ul class="done w"></ul>
    </div>
</body>
</html>

CSS部分