Cookie & WebStorage

Cookie 

// console.log(document.cookie)

// 如果key存在就覆盖，如果key不存在添加新的数据

        // document.cookie="a=3";

        // document.cookie="a=10"; 

JS函数整理cookie的值 

 function getCookie() {
            // 操作数组方法获取
            // return document.cookie.split(";").reduce((v, t) => {
            //     var arr1 = t.trim().split("=")
            //     v[arr1[0]] = isNaN(arr1[1]) ? arr1[1] : Number(arr1[1]);
            //     try {
            //         var value = JSON.parse(arr1[1])
            //         o[arr1[0]] = value;
            //     } catch (e) {}
            //     return v;
            // }, {});
            // 正则表达式方法获取
            var o = {};
            document.cookie.replace(/(\w+)\=([^\;]+)\;?/g, function (t, $1, $2) {
                o[$1] = isNaN($2) ? $2 : Number($2);
                try {
                    var value = JSON.parse($2)
                    o[$1] = value;
                } catch (e) {}
            })
            return o;
        }

// 先判断cookie中的数据是否存在，如果存在拿出来覆盖当前的变量

// 每次变量变化后都重新存储回cookie

        var i=0;
        var arr=[];
        init();
        function init(){
            var o=getCookie();
            if(o.i)i=o.i;
            if(o.arr) arr=o.arr;
            document.addEventListener("click",clickHandler);
        }

        function clickHandler(e){
            i++;
            arr.push(i);
            document.cookie="i="+i;
            document.cookie="arr="+JSON.stringify(arr);
            console.log(arr)
        }

 设置cookie到期时间

var date=new Date();
date.setFullYear(2099);
document.cookie="a=3;expires="+date.toUTCString();//必须使用格里尼治时间字符设置

1、 Cookie仅接受字符串存储

2、 Cookie在通信过程中会自动往返于浏览器于服务器之间。比如提交表单时

        不但将表单提交给了服务器，同时会自动将Cookie也提交给了服务器，同时服务器

        也能自动将数据返回当前浏览器存储。

        1、因为可以自动提交cookie，我们通常将

        用户的token保存在cookie中，当自动提交时会发送到服务器，服务器判断token

        是否正确来设置用户登录，自动登录

         2、因为可以由服务器保存信息到本机的cookie中，所以我们可以利用cookie完成

         广告的精准投放

3、Cookie因为往返服务器和客户端数据传递，因此存储数据不能太多，一般为50条数据

       限制和5K数据大小限制

4、Cookie仅能针对同域数据传递，跨域将不能自动传递，IP或者端口号有一个不相同时就

        叫做跨域

5、Cookie存储时，是有时效性，一般默认存储为临时存储，及关闭浏览器，Cookie自动

        清除，也可以设置有效时间，让Cookie长期驻扎在，有效期内不会自动清除

6、Cookie存储也是按照路径存储的，子路径可以访问父路径，父路径不能访问子路径

        http://www.163.com/

        http://www.163.com/news

        http://www.163.com/news/2022/

        可以通过设置路径的方式在子路径中将数据保存在父路径或者其他路径中

 WebStorage

// 包含localStorage  sessionStorage

sessionStorage 是临时存储 ，关闭页面就会丢失，并且即使同一个页面在不同窗口中开也不共享数据，存储的大小有5M左右，和路径没有关系，也不会自动往返于客户端和服务端间，

localStorage 是本地存储，长期驻扎，不会自动丢失，同域中共享数据，没有路径关系存储大小也是5M左右

只能存储字符串和数值

 存储lcoalsSorage方法（鼓励使用）

localStorage.num=3;
console.log(localStorage.num)

推荐放弃：

localStorage.setItem("num",3);
console.log(localStorage.getItem("num"))

 删除lcoalsSorage方法（鼓励使用）

delete localStorage.num;
localStorage.removeItem("c");