cookie是什么 可以长期储存一个数据

wed传输用http协议连接服务器 http协议 上下文无关协议，无状态协议，

服务器设置 加密的 子页面也可以用 

在访问域名时 浏览器会自动带上cookie 可以保存密码 用户名

特点

cookie不可跨域

cookie存储在浏览器里面

cookie有数量限制  在50个左右 大小在4kb左右

cookie的存储时间非常灵活

cookie服务器可以设置（后端） 客户端也可以设置（前段）

 document.cookie = 'name=liujian';

通过一个方法 document.cookie 可读可写 键值对 key：value 每次可以设置一个

1.name cookie的名字 value cookie的值 唯一性同一个cookie只能设置一次多次设置会覆盖

2.domain 设置cookie在那个域下面是有效的

3.path cookie的路径 

document.cookie = 'name=123;domain=127.0.0.2;path=/docs';

4.expires  cookie的过期时间 可选择 默认保存在浏览器关闭删除 Session这是默认值 也叫做绘画期 时间格式是GMT 时间使用 new Date（年，月-1，日期）本机时间

document.cookie = 'name=123;expires=' + new Date(2021, 5, 8);

expires=' + new Date(2008, 1, 1) 设置过期时间 取得客户端的时间 

5.max-age cookie的有效期 以秒为时间为周期的时间段 能够存活的时间 为正数

document.cookie = 'top=30;max-age=2'; 
//这条cookie会在二秒中删除

6.HttpOnly 有这个标记，前段无法获取

7.Secure 设置这个标记 cookie只能通过https协议传输 为了安全 

8.SameSite 设置以后 在跨域请求的时候不能被发送

因为cookie并没有较好的方式操作 封装cookie方法

        //封装cookie方法
        var manageCookie = {
                setCookie: function(name, value, date) {
                    //设置cookie需要传name名，value值，tate是时间秒数
                    document.cookie = `${name}=${value};max-age=${date*(3600*24)}`;
                    //document.cookie = name + '=' + value + ';max-age=' + date;
                },
                removeCookie: function(name) {
                    //用设置的方法给当前名cookie置空
                    this.setCookie(name, '', 0);
                },
                getCookie: function(name) {
                    //获取cookie 遍历所有cookie转换为数组的
                    var cookies = document.cookie;
                    var cookiesArr = cookies.split('; ');
                    for (var i = 0; i < cookiesArr.length; i++) {
                        var item = cookiesArr[i].split('=');
                        if (item[0] == name) {
                            return item[1]; //需要接收数据
                        }
                    }
                }
            }

    // 拖拽实例应用本地cookie存储
        var drag = {
            init: function(dom) {
                this.dom = dom;
                this.bindEvent();
                var lefts = manageCookie.getCookie('newLeft');
                var tops = manageCookie.getCookie('newTop');
                this.dom.style.left = lefts ? lefts + 'px' : this.dom.offsetLeft + 'px';
                this.dom.style.top = tops ? tops + 'px' : this.offsetTop + 'px';
            },
            bindEvent: function() {
                this.dom.onmousedown = this.mouseDown.bind(this);
            },
            mouseDown: function(e) {
                document.onmousemove = this.mouoseMove.bind(this);
                document.onmouseup = this.mouoseUp.bind(this);
                // 按下时
                this.disX = e.clientX - this.dom.offsetLeft;
                this.disY = e.clientY - this.dom.offsetTop;
            },
            mouoseMove: 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';
            },
            mouoseUp: function() {
                document.onmousemove = null;
                document.onmouseup = null;
                // 抬起时存cookie
                manageCookie.setCookie('newLeft', this.newLeft);
                manageCookie.setCookie('newTop', this.newTop);
            },
        }
        var odiv = document.querySelector('.box');
        drag.init(odiv);
        var o = manageCookie.getCookie('name');

cookie 的缺点储存容量太小只有4k 安全性 在大量数据的情况下不适用 有时间限制 

没有自己的方法需要封装 是一个字符串

Web Storage 是常用的储存方式 存储容量5MB 使用比较简单 不能跨域 存储方式是键/值对 

Web Starage 应用很宽泛 购物车 软件偏好设置 表单的历史输入 H5游戏 

console.log(localStorage, sessionStorage);

 都继承与Storage 上面有五个的方法 一个属性

length --  属性 本地储存的数量

1 key() 通过索引找到储存的数据

console.log(localStorage.key(0), sessionStorage.key(0));

2 localStorage.getItem() 通过设置健明取到本地存储的数据

console.log(localStorage.getItem('name'), sessionStorage.getItem('name'));

3 localStorage.setItem() 设置一个本地存储结构 设置上的位置是不一定的 所以通过key找value并不保险

console.log(localStorage.setItem('name', 'liu'), sessionStorage.setItem('name', 'wang'));

 下面是设置并取出localStorage

 

4 localStorage.removeItem() 删除一个本地存储结构

console.log(localStorage.removeItem('name'), sessionStorage.removeItem('name'));

5 localStorage.clear() 清空本地存储数据

1.sessionStorage 绘画期储存 仅在本次绘画中有作用 仅在当前窗口下有作用 使用比较少

2.localStorage 可以储存在同一个域名下都有作用 本地存储 页面关闭依然存在 跟http协议无关

localStorage 事件 当localStorage发生改变时在其他页面可以改变  

在浏览器的无痕模式下localStorage存储的数据会在关闭无痕模式时被删除