js/函数的本质就是对象 - 储存 cookie / Storage - 《前端杂记》

cookie
Web Storage

cookie

个人感觉用于维持登录状态，类似与登录百度账号，在其它百度的产品网页无需再次登录
cookie需要在http的协议下才会有
cookie不可跨域
cookie的数量与大小有限制一般为4K 数量为50个
cookie存储在浏览器中
cookie存储时间灵活，服务器与客户端都可以设置
会跟随请求到服务器
设置方式：document.cookie cookie只有这一种设置方式 cookie没有专门的操作方法
值： key : value
cookie的属性
name : cookie的名字，唯一性，第二次会覆盖第一次
value：cookie的值

document.cookie = 'name=kaivon';

domain：设置cookie在哪个域下是有效的
path：cookie的路径

document.cookie = 'color=red; domain=127.0.0.2; path=/do'; // 当在 http://127.0.0.2:5500/do 下才能看到

expires：cookie过期的时间

document.cookie = 'width=40; expires=' + new Date(2030, 1, 1); //2330年1月1号过期

max-age：cookie的有效期
-1 ：过期
0：临时
正数：有效时间以秒为单位

document.cookie = 'padding=30; max-age=5'; // 五秒后过期

下面三个前端无法控制
HttpOnly 有这个标记的cookie，前端是无法获取的
Secure 设置cookie只能有过https协议传输
SameSite 设置cookie在跨域请求的时候不能被发送
cookie的小demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100px;
            top: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
    //封装cookie
        var manageCookie = {
            //设置cookie
            set: function (name, value, date) {
                //expires    date：要求用户传入的是一个时间节点（这里函数默认规定传进来的是天数）
                /* var endDate = new Date();    //过期时间点
                endDate.setDate(endDate.getDate() + date);
                document.cookie = name + '=' + value + '; expires=' + endDate; */
                document.cookie = name + '=' + value + '; max-age=' + date;    //这里要求用户传入的第三个参数为过期的秒数
            },
            //移除cookie
            remove: function (name) {
                this.set(name, '', 0);    //只需要把时间设置成0就可以了
            },
            //获取cookie
            get: function (name) {
                var cookies = document.cookie.split('; ');    //'name=kaivon; padding=30; width=40;' => ['name=kaivon', 'padding=30', 'width=40']
                for (var i = 0; i < cookies.length; i++) {
                    //[['name','kaivon'],['padding','30'],['width',40]]
                    var item = cookies[i].split('=');        //['name','kaivon']
                    if (item[0] == name) {    //这个条件成立说明用户传进来的那个cookie的名字找到了
                        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);
            }
        }
        drag.init(document.getElementById('box'));
    </script>
</body>
</html>

Web Storage

分为两个
localStorage与 sessionStorage 都是js的内置对象他们的原型是 Storage
sessionStorage 会话级别的存储，仅在数据的沟通中有效，仅在本页面有效
不可跨域
本地储存
与协议无关，cookie需要http协议，storage对协议没有要求

localStorage 下的属性
1、length 本地存储数据的数量
localStorage 下的方法
1、key() 通过索引找到存储的数据 // 此处的索引会是乱序，因为他不会按照添加顺序进行排序，这个方法有些鸡肋
2、getItem() 通过键名取到本地存储的数据
3、setItem() 设置一个本地存储数据
4、removeItem() 删除一个本地存储数据
5、clear() 清空本地存储数据

localStorage.setItem('name', 'kaivon');
储存对象
 var color = ["red", "green"];   //"red", "green"
 var color = { "c1": "red", "c2": "green" }  //[object Object]
 localStorage.setItem('color', JSON.stringify(color));
 console.log(JSON.parse(localStorage.getItem('color')));

storage事件当在另一个页面修改同一个localStorage ，其他页面也会跟着更新，就像是购物车，在卖鞋子页面往购物车里添加一双鞋，又在买衣服的页面添加一身衣服，但是购物车页面都会显示你所添加进购物车的鞋子与衣服，

window.addEventListener('storage',function(ev){
    console.log('我在04页面修改了购物车，这个log会在05的页面打印出来；或者我在05的页面修改了购物车，这个log会在04的页面打印出来！');
    console.log(ev.key);    //修改的是哪一个localstorage（名字key）
    console.log(ev.newValue);    //修改后的数据
    console.log(ev.oldValue);    //修改前的数据
    console.log(ev.storageArea);    //storage对象
    console.log(ev.url);    //返回操作的那个页面的url
    init();
});

         [localStorage的购物车.rar](https://www.yuque.com/attachments/yuque/0/2020/rar/1376603/1598282385052-76496ed0-18a0-482c-b3f3-294d689b60ab.rar?_lake_card=%7B%22uid%22%3A%221598282383558-0%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2020%2Frar%2F1376603%2F1598282385052-76496ed0-18a0-482c-b3f3-294d689b60ab.rar%22%2C%22name%22%3A%22localStorage%E7%9A%84%E8%B4%AD%E7%89%A9%E8%BD%A6.rar%22%2C%22size%22%3A150499%2C%22type%22%3A%22%22%2C%22ext%22%3A%22rar%22%2C%22progress%22%3A%7B%22percent%22%3A99%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22id%22%3A%225Zmrg%22%2C%22card%22%3A%22file%22%7D)