HTML5 —— 本地存储

随着互连网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据。对此，HTML 规范提出了相关解决方案。
 
本文为博主学习时所记笔记，参考：黑马 pink 老师前端入门；HTML 本地存储

一、本地存储特性

---

1. 数据存储在用户浏览器中
2. 设置、读取方便，甚至刷新页面不丢失数据
3. 容量较大，sessionStorage 约 5 M，localStorage 约 20 M
4. 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

HTML 本地存储提供了两个在客户端存储数据的对象：

window.sessionStorage： 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
window.localStorage： 里面存储的数据没有过期时间设置

下面分别介绍以上两种方法。
 

二、window.sessionStorage

---

• 几点说明

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

• 存储数据

	sessionStorage.setItem(key,value)

例如，点击按钮存储表单数据：

    set.addEventListener('click', function () {
        var val = ipt.value;
        sessionStorage.setItem('uname', val);
    })

效果展示和查看存储数据的步骤：

当然你也可以同时存储多个数据，无非就是设置多个 key 的问题。如下：

    set.addEventListener('click', function () {
        var val = ipt.value;
        sessionStorage.setItem('uname', val);
        sessionStorage.setItem('password', val);
        sessionStorage.setItem('email', val);
    })

• 获取数据

	sessionStorage.getItem(key)

例如，点击获取按钮打印上述存储数据：

    get.addEventListener('click', function () {
        var uname = sessionStorage.getItem('uname');
        console.log(uname);
    })

• 删除指定数据

	sessionStorage.removeItem(key)

例如，点击删除按钮将存储的数据删除：

    remove.addEventListener('click', function () {
        sessionStorage.removeItem('uname');
    })

• 删除所有数据

	sessionStorage.clear()

例如，点击清空所有数据按钮，可以将当前页面存储的数据都删除。（慎用）

    del.addEventListener('click', function () {
        sessionStorage.clear();
    })

 

三、window.localStorage

---

• 几点说明

1. 此方法存储的数据，生命周期永久生效。除非手动删除，否则即使关闭页面数据也会存在。
2. 可以多窗口（页面）共享，同一浏览器可以共享数据。
3. 以键值对形式存储。

• 存储数据

	localStorage.setItem(key,value)

与上述方法不同，查看数据应该到 Application —— Storage —— Local Storage 中

• 获取数据

	localStorage.getItem(key)

• 删除指定数据

	localStorage.removeItem(key)

• 删除所有数据

	localStorage.clear()

具体存储获取删除操作与上面方法相同，不过需要注意：如果没有手动点击删除数据，即使关闭了浏览器页面，重新打开时依然有之前的数据存储。

还有一点说明：在保证同一浏览器的情况下，即使打开另一个页面，也可以操作前存储的数据的。

 

四、案例：记住用户名

---

这个案例其实挺简单，简单说一下原理。如果我们勾选了记住用户名，那么输入的用户名数据将会被本地存储，下次打开此页面时表单中会直接显示此前存储的数据。否则，如果没有勾选，则会删除此前存储的用户名数据。

<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
    var username = document.querySelector('#username');
    var remember = document.querySelector('#remember');
    if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username');
        remember.checked = true;    
    }
    remember.addEventListener('change', function () {
        if (this.checked) {
            localStorage.setItem('username', username.value)
        } else {
            localStorage.removeItem('username');
        }
    })
</script>

 

五、案例：todolist

---

此案例是利用 jQuery 写的。

主要是用到本地存储 localStorage ，无论是按下回车还是点击复选框，都要先将数据存储然后将本地存储的数据加载到页面，保证即使关闭页面数据也不会丢失。

采用数组的形式进行存储，如下代码为两条信息的存储示例

    var todolist = [{
        title: '明天一定要早起！',			// 事项
        done: true					// 是否完成
    }, {
        title: '晚上不能熬夜了！',
        done: false
    }]

注意：

1. 本地存储 localStorage 里面只能存储字符串格式数据，因此需要将对象转换为字符串，利用 JSON.stringify(data) 。
2. 获得本地存储的数据，需要把字符串数据转换为对象格式，利用 JSON.parse(data)

JS 代码

$(function () {
    // 打开页面时就要进行数据渲染
    load();

    // 1. 添加待办事项
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13 && $(this).val()) {
            var local = getData();
            // 将最新数据追加给数组
            local.push({ title: $(this).val(), done: false });
            // 将此数组存储下来
            saveDate(local);
            // 将本地存储数据渲染至页面
            load(local);

            $(this).blur().val("");
        }
    })



    // 2. 删除待办事项
    $("ol, ul").on("click", "a", function () {
        var data = getData();
        // 获取 a 标签，自定义索引
        var index = $(this).attr("data-id");
        // 删除对应元素数据
        data.splice(index, 1);
        // 保存数据到本地存储
        saveDate(data);
        // 重新渲染
        load();
    })



    // 3. 点击完成按钮
    $("ol, ul").on("click", "input", function () {
        // 获取本地数据
        var data = getData();
        // 利用 a 标签的自定义属性获取索引
        var index = $(this).siblings("a").attr("data-id");
        // 找到当前复选框，修改 done 属性
        data[index].done = $(this).prop("checked");
        // 保存数据
        saveDate(data);
        // 重新渲染
        load();
    })

    // 封装函数：读取本地存储的数据
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);    // 返回对象格式
        } else {
            return [];
        }
    }

    // 封装函数：保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    // 封装函数：数据渲染
    function load() {
        var data = getData();
        // 渲染前将元素内容清除，再用 each 遍历
        $("ol, ul").empty();

        // 声明变量记录个数
        var todoCount = 0;
        var doneCount = 0;

        $.each(data, function (i, ele) {
            if (ele.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");
                todoCount++;
            }
        });

        // 修改事项个数
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})

 

---