本地化存储

本地化存储的方式有很多

cookie

cookie是浏览器中存储数据的东西

1. 为什么有cookie呢? 在http协议中存在上下文无关也就是无状态协议，就是说请求之间是没有任何关系的，那么客户端向服务器发送请求并拿到服务器响应的数据之后就取消关联了；那么cookie就是能够保存下来，从而将相关的请求之间关联起来。

2. 保存cookie是浏览器自动去存储的。

   

3. cookie有域名限制，不能跨域，一级域名和二级域名可以通过Domain访问

4. cookie存储在浏览器中，也就是说同一浏览器的同一个域名下的不同页面都是可以访问的

5. cookie的有数量和大小的限制（大小在 50 个左右，大小在 4kb 左右）

6. cookie的存储时间是可以设置的，很灵活

7. cookie不光可以服务器设置，客户端也可以设置 document.cookie这是一个属性，以键值对的形式存在 当然 cookie 的使用设置一定是在 http 协议下，不能是在 file 协议

cookie的属性

• name是 cookie的名字，具有唯一性

• value是 cookie的值

• domain设置cookie在那个域名下有效

• path是cookie有效使用的路径

• expires是cookie的过期时间，它的值表示一个具体的时间点，默认在浏览器关闭的时候就会删除(这个日期的格式必须是 GMT（格林尼治标准时间直接new Date()就能看到），时间还有一个格式叫UTC)

• max-age是cookie的有效期它的值是秒为单位的时间段，就是 cookie能够存活的时间，

  • 值-1：表示临时的 cookie
  • 值0：表示时间段已经到了
  • 正数：表示还能存活的周期

• HttpOnly标记的，我们无法通过document.cookie拿到，后端来用的

• Secure设置cookie 只能通过HTTPS协议传输

• SameSite设置cookie 在跨域请求的时候不能被发送

cookie 的封装

var manageCookie = {
  // 设置
  set: function (name, value, date) {
    // // expires,时间节点date是天数
    // let endDate = new Date();
    // // 现在的时间加上20天
    // endDate.setDate(endDate.getDate() + date);
    // document.cookie = name + "=" + value + "; expires=" + endDate;

    document.cookie = name + "=" + value + "; max-age=" + date; //这里date是秒
  },
  // 删除
  remove: function (name) {
    // 删除就是把cookie设置过期
    this.set(name, "", 0);
  },
  // 获取
  get: function (name) {
    var cookies = document.cookie.split("; "); //name=acac;padding=30;
    for (var i = 0; i < cookies.length; i++) {
      var item = cookies[i].split("="); //[[name, value]];
      if (item[0] == name) {
        return item[1];
      }
    }
  },
};
manageCookie.set("left", "true", 1000);
// manageCookie.remove("left");
console.log(manageCookie.get("left"));

利用 cookie 实现本地化存储，拖拽效果的实现

<script>
      // 封装cookie方法
      var manageCookie = {
        // 设置
        set: function (name, value, date) {
          // // expires,时间节点date是天数
          // let endDate = new Date();
          // // 现在的时间加上20天
          // endDate.setDate(endDate.getDate() + date);
          // document.cookie = name + "=" + value + "; expires=" + endDate;
          document.cookie = name + "=" + value + "; max-age=" + date; //这里date是秒
        },
        // 删除
        remove: function (name) {
          // 删除就是把cookie设置过期
          this.set(name, "", 0);
        },
        // 获取
        get: function (name) {
          var cookies = document.cookie.split("; "); //name=acac;padding=30;
          for (var i = 0; i < cookies.length; i++) {
            var item = cookies[i].split("="); //[[name, value]];
            if (item[0] == name) {
              return item[1];
            }
          }
        },
      };
      var box = document.querySelector(".box");
      let originalLeft = manageCookie.get("leftstyle");
      let originalTop = manageCookie.get("topstyle");
      box.style.left = originalLeft ? originalLeft : 100 + "px";
      box.style.top = originalTop ? originalTop : 100 + "px";
      box.addEventListener("mousedown", function (e) {
        // 偏移距离
        let disX = e.clientX - box.offsetLeft;
        let disY = e.clientY - box.offsetTop;
        document.onmousemove = function (e) {
          console.log(box.offsetLeft, e.clientX);
          // console.log(disX, disY);
          let newLeft = e.clientX - disX;
          let newTop = e.clientY - disY;
          box.style.left = newLeft + "px";
          box.style.top = newTop + "px";
          // console.log(box);
        };
      });
      box.addEventListener("mouseup", function () {
        document.onmousemove = null;
        // 鼠标抬起记录dom的位置
        console.log(box.style.left, box.style.top);
        manageCookie.set("leftstyle", box.style.left, 10000);
        manageCookie.set("topstyle", box.style.top, 10000);
      });
    </script>

 <script>
      // 封装cookie方法
      var manageCookie = {
        // 设置
        set: function (name, value, date) {
          // // expires,时间节点date是天数
          // let endDate = new Date();
          // // 现在的时间加上20天
          // endDate.setDate(endDate.getDate() + date);
          // document.cookie = name + "=" + value + "; expires=" + endDate;
          document.cookie = name + "=" + value + "; max-age=" + date; //这里date是秒
        },
        // 删除
        remove: function (name) {
          // 删除就是把cookie设置过期
          this.set(name, "", 0);
        },
        // 获取
        get: function (name) {
          var cookies = document.cookie.split("; "); //name=acac;padding=30;
          for (var i = 0; i < cookies.length; i++) {
            var item = cookies[i].split("="); //[[name, value]];
            if (item[0] == name) {
              return item[1];
            }
          }
        },
      };
      //拖拽
      var drag = {
        init: function (dom) {
          this.dom = dom;
          this.bindEvent();

          var l = manageCookie.get("newLeft");
          var t = manageCookie.get("newTop");

          this.dom.style.left = l ? l + "px" : "100px";
          this.dom.style.top = t ? t + "px" : "100px";
        },
        bindEvent: function () {
          this.dom.onmousedown = this.mouseDown.bind(this);
        },
        mouseDown: function (e) {
          document.onmousemove = this.mouseMove.bind(this);
          document.onmouseup = this.mouseUp.bind(this);

          this.disX = e.clientX - this.dom.offsetLeft;
          this.disY = e.clientY - this.dom.offsetTop;
        },
        mouseMove: function (e) {
          this.newLeft = e.clientX - this.disX;
          this.newTop = e.clientY - this.disY;

          this.dom.style.left = this.newLeft + "px";
          this.dom.style.top = this.newTop + "px";
        },
        mouseUp: function () {
          document.onmousemove = null;
          document.onmouseup = null;

          //鼠标抬起的时候需要存储(cookie)一下此刻盒子的位置信息
          manageCookie.set("newLeft", this.newLeft, 10000);
          manageCookie.set("newTop", this.newTop, 10000);
        },
      };

      var box = document.querySelector(".box");
      drag.init(box);
    </script>

Web Storage

能存储5MB大小，localStorage没有时间限制,当然他不可以跨域

一般用来保存用户编号设置，搜索历史，购物车功能

浏览器的无痕模式下就不会在本地存储这些

以下两种都继承自Storage

方法

1. length 本地存储数据的数量
2. key() 通过索引找到存储的数据
3. getItem() 通过键名取到本地存储的数据
4. setItem() 设置一个本地存储数据
5. removeItem() 删除一个本地存储数据
6. clear() 清空本地存储数据

LocalStorage(本地存储，当前域名下都有效)

storage 事件

window.addEventListener("storage", function (ev) {
  console.log("发生了修改");
  console.log(ev); //这个对象上有关于发生变化的数据的相关信息
});

也就是说在当前页面发生的操作，不会在当前页面反应出来，会在其他页面反应 假设有两个页面 A、B，以购物车为例，我在 A 页面修改了本地存储的数据，那么在 B 页面会打印出来；我在 B 页面修改了本地存储的数据，那么在 A 页面会打印出来；

存储一个对象时，如下图

那么正确的存储一个对象应该是需要利用JSON

获取对象

sessionStorage(会话级别的存储，仅在当前窗口有效)