使用localStorage做一个简单网页记事本

---

---

localStorage和sessionStorage

localStorage和sessionStorage是H5的新特性，和cookie一样都可以在客户端存储一些数据。
localStorage（本地存储）
1.生命周期永久，除非手动删除，即使关闭页面，数据也会存在
2.可以多窗口（页面）共享，（同一浏览器间可以共享)
3.以键值对的形式存储使用

sessionStorage（会话存储）
1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对的形式存储使用

---

一、具体思路

因为要做一个记事本，记事本应该使用生命周期永久的localStorage
记事本的流程：
1、输入代办事项，按回车将其添加道代办事项，并存储在本地
2、代办事项可以选择打勾(checkbox)，转换为已完成事项
3、代办事项和已完成事项都可以点击删除

二、JavaScript代码

代码如下：

<script>
    $(function () {
   
        load();
        $('#title').on('keydown', function (event) {
   
            if (event.keyCode == 13) {
   
                if ($(this).val() === '') {
   
                    alert('请输入内容哦！');
                } else {
   
                    //读取本地存储的数据
                    var local = getData();
                    local.push({
   
                        title: $('#title').val(),
                        done: false
                    });
                    $(this).val('');
                    saveData(local);
                    load();
                }
            }
        })
        //删除操作
        $('ol,ul').on('click', 'a', function () {
   
            var data = getData();
            var index = $(this).attr('id');
            // console.log(data);
            data.splice(index, 1);
            saveData(data);
            load();
        })
        //完成操作
        $('ol,ul').on('click', 'input', function (