本地存储（localStorage）

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；
存储的数据将保存在浏览器会话中。

localStorage 类似 sessionStorage，但其区别在于：
存储在 localStorage 的数据可以长期保留；
而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

cookie也用来存储数据，但是cookie不适合存储太多数据
因为cookie有个特性：每次请求后台的时候，cookie所有的数据都会发过去，但有些数据是本次请求非必要数据，没有必要传到后台

localStorage一共四个方法：
getItem(key, value): 增加一个数据项b,value只能传字符串格式的
getItem(key): 读取数据localStorage项
removeItem(key): 移除localStorage项
clear(key): 移除所有

localStorage.setItem(‘liang’, ‘shen me ya’); // 数据是永久存储的当你关闭页面重新打开，数据还在。 按域分，只能看见当前域的

---

一个案例（待办事项），运行效果：

See the Pen VwpRJPJ by 梁敏莹 ( @liang-duck) on CodePen. ***

思路：
首先设计一下字符串该怎么存，必须可遍历=> 字符串、数组、JSON格式对象

字符串不可用，因为字符串不具备数据结构的，或者说它的数据结构非常简单，就是一些字符重头开始排列
只能通过下标开始取值，一次只能取到一个字符

所以想办法设计一下数据的结构

JSON不可用，因为JSON格式的遍历是没有顺序的，JSON格式的对象本身就是无序的，所以要保证数据顺序的时候就不能使用 JSON

数组是有序的，但不能反馈值

 [
      [
           内容
            状态
      ]
]

只能按照一定的顺序进行存放，所有子数组的第一条是内容，第二条是状态

数组不好做，因为必须强制地让它内容在第一个，状态在第二个，必须记住顺序

   所以里面一层应该用JSON
   [
        {
            content: "内容1"，
            done: false // true 完成， false 未完成
        }
        {
            content: "内容2"，
            done: false
        }
   ]

---

总代码：

<script>
    const oIpt = document.getElementById("ipt");
    const oList = document.getElementById("list");
    const data = localStorage.getItem("todolist");

    // 当第一次打开或者说什么都没有存的时候，用for遍历会报错，所以用if判断一下是否有内容
    if (data === null)
    {
        // 如果没有，就创建
        localStorage.setItem("todolist", "[]");
    }else {
        // 如果有就遍历
        JSON.parse(data).forEach((v, i, self) => {
            oList.innerHTML += `<li class=${v.done? "done": "do"}>${v.content}
            <span>X</span></li>`
        })
    }

    // 回车添加
    oIpt.onkeyup = function (ev) {
        ev = ev || window.event;
        // 判断键盘的键值，不是回车就return
        if(ev.keyCode !== 13) return;

        // 按了回车键
        const content = this.value.trim(); // trim()=>去除字符串的头尾空格:

        // 没有内容什么都不干
        if (!content) return;

        // 不仅按了回车，还有数据
        // 先取出之前的，再push进去，否则会覆盖之前的
        const data = JSON.parse(localStorage.getItem("todolist"));

        // 更新页面
        oList.innerHTML += `<li class="do">${content}<span>X</span></li>`;

        // 更新本地存储库
        data.push({
            content,
            done: false
        });

        // data
        localStorage.setItem("todolist", JSON.stringify(data));

        // 清空数据框
        this.value = "";

    };

    // X 的事件，事件代理
    oList.addEventListener("click", e => {
        const that = e.target;
        const data = JSON.parse(localStorage.getItem("todolist"));

        // 先组织冒泡
        e.stopPropagation();

        const tagName = that.tagName.toLowerCase();
        switch (tagName) {
            case  'span':
                data.forEach(function (v, i, self){
                    if (this === oList.children[i])
                    {
                        oList.removeChild(this);
                        self.splice(i, 1)
                    }
                }, that.parentNode/*forEach回调函数的this指向*/)
                break;
            case  'li':
                data.forEach(function (v, i, self){
                    if (that === oList.children[i])
                    {
                        v.done = !v.done;
                        that.classList.toggle ("done");
                    }
                })
                break;
           // 没有default
        }
        localStorage.setItem("todolist", JSON.stringify(data));
    })