本地存储

1. 本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1.1.本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

1.2.window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

<script>
      var inp = document.querySelector("input");
      var set = document.querySelector(".set");
      var get = document.querySelector(".get");
      var remove = document.querySelector(".remove");
      var del = document.querySelector(".del");
      console.log(localStorage.setItem(uname));
      set.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值存储起来
        var val = inp.value;
        sessionStorage.setItem("uname", val);
        sessionStorage.setItem("pwd", val);
      });
      get.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值获取过来
        sessionStorage.getItem("uname");
      });
      remove.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值删除
        sessionStorage.removeItem("uname");
      });
      del.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值全部删除
        sessionStorage.clear();
      });
    </script>

1.3.window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

<script>
      var inp = document.querySelector("input");
      var set = document.querySelector(".set");
      var get = document.querySelector(".get");
      var remove = document.querySelector(".remove");
      var del = document.querySelector(".del");
      set.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值存储起来
        var val = inp.value;
        localStorage.setItem("uname", val);
        localStorage.setItem("pwd", val);
      });
      get.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值获取过来
        // localStorage.getItem("uname");
        console.log(localStorage.getItem("uname"));
      });
      remove.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值删除
        localStorage.removeItem("uname");
      });
      del.addEventListener("click", function () {
        // 当我们点击之后，就可以把表单里的值全部删除
        localStorage.clear();
      });
    </script>

1.4.案例：记住用户名

如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

案例分析

1. 把数据存起来，用到本地存储

2. 关闭页面，也可以显示用户名，所以用到localStorage

3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

4. 当复选框发生改变的时候change事件

5. 如果勾选，就存储，否则就移除

<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>