localStorage本地存储，备忘录案例

首先，这个小项目是基于移动端开发的，新建一个HTML文件，在meta标签添加修改相关属性：

导入css文件和js文件，我导入js文件放在body中最下面，因为先页面渲染再进行数据交互

body设置好的元素和样式

对应的css样式：

最后设置好的效果图：

最后编写js代码：

定义需要的全局变量

第一、页面渲染；页面渲染前读取本地存储，将本地数据读取；如果第一次使用，就创建一个空数组，用于保存数据；

第二、渲染函数

//定义一个渲染函数
function renderList() {
    // dataList转换成JSON格式的字符串
    // JSON.stringify(dataList) :将对象转换成JSON格式的字符串
    // 每一次修改完dataList的数据，要存放在localStorage
    localStorage.dataList = JSON.stringify(dataList);
    // 每一次渲染前把之前的内容先清空，再渲染
    todolist.innerHTML = "";
    donelist.innerHTML = "";
    var todoNum = 0;
    var doneNum = 0;
    dataList.forEach(function(item,index){
        // 当点击后，就新创建一个item这样一个div到clist的div里
        var newdiv = document.createElement("div");
        newdiv.className = "item";
        // 判读checkbox是否checked
        if (item.type == "todo") {
            newdiv.innerHTML = `
            <span class="checkbox">
                <input class="ipt_cbox" type="checkbox" name="check" value="" data-index="${index}">
            </span>
            <span class="content">${item.content}</span>
            <span class="delete" data-index="${index}"></span>
            `;
            todolist.appendChild(newdiv);
            todoNum++;
            inputDom.value = "";          
        }else{
            newdiv.innerHTML = `
            <span class="checkbox">
                <input class="ipt_cbox" type="checkbox" name="check" checked = "checked" value="" onclick="return false">
            </span>
            <span class="content">${item.content}</span>
            <span class="delete" data-index="${index}"></span>
            `;
            donelist.appendChild(newdiv);
            doneNum++;
            inputDom.value = "";
        }
        
    });
    // 修改待办事项的数量
    todoNumspan.innerHTML = todoNum;
    // 修改已完成事项的数量
    doneNumspan.innerHTML = doneNum;
}

监听输入框

监听点击勾选框和删除图标的事件

这个项目我有上传到GitHub上，将链接网址生成二维码可以手机扫描，在手机上使用：备忘录链接

这个我也将它打包成了APP，在我的资源可以下载，可以下载下来作为自己的备忘录APP使用；