HTML5增加了localStorage本地存储，比以前的cookie小饼干存放的数据增多了，还是很好用的，用来存放用户信息或者做一个本地的任务清单还是绰绰有余的。

点击图片直接看具体效果。

功能：

1、如果没有数据，显示暂无数据，如果本地存储有数据，则展示数据。

2、点击添加任务按钮，进行输入框数据的校验，点击提交按钮，把输入存入本地存储中，并刷新页面，回到任务列表展示数据。

3、点击删除按钮，可以删除该条数据，并把本地存储对应的数据也删除。

核心代码：

使用了jQuery，所以要先引入jQuery。

        // 1、先读取是否有数据，如果没有，则显示暂时没有数据，如果有，则罗列数据列表
        // 2、点击添加任务，按钮切换
        // 3、获取表单数据，追加到localStorage中，页面重新加载显示数据列表。
        // 4、删除一条数据，把localStorage中对应索引的数据删除，因为数据是数组形式存放的，所以索引值要变化，就需要重新加载一次数据，更新列表的索引值

        // 显示数据
        showLists();

        // 添加任务按钮切换
        $('.nav').find('.nav-a').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.container').find('.tab-content').eq($(this).index()).removeClass('none').siblings().addClass('none');
        })

        // 获取表单数据，追加
        addLists();

        // 检测输入的数据的合法性
        // 因为这个版本的jquery不支持input事件，所以这里使用了原生js
        const oInput = document.querySelector('#content');
        oInput.addEventListener('input', function () {
            let val = this.value;
            console.log(val);
            // 没有数据输入
            if (!val.trim()) {
                // 如果没有错误提示，则创建一个错误提示
                if (!$('.inputbox').find('.tips').length) {
                    $('#content').after($('<p class="tips">不能为空啊！</p>'));
                    return;
                }
            } else {
                // 如果有错误提示，则删除
                if ($('.inputbox').find('.tips').length) {
                    $('.inputbox').find('.tips').remove();
                }
            }
        })

        function addLists() {
            let dataLists = [];
            $('#btn-submit').on('click', function () {
                let info = $('#content').val();
                let date = $('#mydate').val();
                // 如果date没有数据,则提供一个默认值。
                date = date || '2022-05-24';
                if (!info.trim()) {
                    // 如果没有提示信息，则创建一个，如果有，则跳过不创建，并且不再往下执行。
                    if (!$('.inputbox').find('.tips').length) {
                        $('#content').after($('<p class="tips">不能为空啊！</p>'));
                        return;
                    }
                    // 只要为空，就不再往下执行
                    return;
                }

                // 有数据的时候
                // 如果有提示信息，则删除
                if ($('.inputbox').find('.tips').length) {
                    $('.inputbox').find('.tips').remove();
                }
                // 获取localStorage里面的数据
                let data = JSON.parse(localStorage.getItem('dataLists'));
                // console.log(data);
                // 如果有数据，则添加到数组中保存起来
                if (data) {
                    dataLists = data;
                };
                // 再追加表单里面新的数据
                dataLists.push({
                    "content": info,
                    "date": date
                })
                // 存储到本地存储中
                localStorage.setItem("dataLists", JSON.stringify(dataLists));
                // 刷新页面，回到任务列表上
                location.reload();
            })
        }
        // 显示数据函数
        function showLists() {
            let dataLists = JSON.parse(localStorage.getItem('dataLists'));
            // console.log(dataLists);
            if (!dataLists || !dataLists.length) {
                $('.task-ul').html(`<li><p style="text-align:center;font-size:0.875rem;color:#999">暂时没有数据！</p></li>`);
                return;
            }
            // 有数据，则显示出来
            let data = JSON.parse(localStorage.getItem('dataLists'));
            let str = '';
            data.forEach(function (item, index) {
                str += `<li class="task-li">
                        <p class="task-time">${item.date}</p>
                        <p class="task-p">${item.content}</p>
                        <a href="javascript:;" class="btn-del" data-id = ${index}>删除</a>
                    </li>`
            })
            $('.task-ul').html(str);

            // 删除数据
            $('.btn-del').on('click', function () {
                $(this).parent().remove();
                let data = JSON.parse(localStorage.getItem('dataLists'));
                // 获取自定义属性data-id的值
                data.splice($(this).data('id'), 1);
                localStorage.setItem('dataLists', JSON.stringify(data));
                // 重新加载页面，就会重新去执行页面数据的显示，数据上面的data-id就会和数组保持一样的更新。
                // location.reload();
                showLists();
            })
        }