14、Cookie

一、cookie的概念

cookie 是客户端与服务器端进行通讯使用的一个能够在浏览器本地化存储的技术

PS：chrome不支持本地文件的cookie读写

二、cookie的基本设置及获取

1、设置 ==> document.cookie = ‘name = value’

每次只能设置一条cookie

2、获取 ==> document.cookie

（2.1）一次性获取到所有的cookie，是一串字符串
（2.2）获取时得到所有cookie，多个cookie之间用分号+空格（"; "）来隔开

案例:七天免登陆

btnSubmit.onclick = function(){
    // 5.表单submit按下即提交，不管满不满足条件。所以阻止默认行为
    e.preventDefault();
    // 1.获取用户名密码
    var _username = username.value.trim();
    var _password = password.value;
    //2.若用户名长度为0，退出函数。
    if(_username.length===0){
        alert('用户名不能为空');
        return;
    }
    //3.判断是否勾选"7天内免登陆"选项。若勾选保存cookie
    if(checkbox.checked){
        var d = new Date();
        d.setDate(d.getDate()+7);//d此时是一个UTC时间对象，转成字符串格式
        document.cookie = 'username=' + _username + ';expires='+d.toUTCString();
    }
    //4.不管有没有勾选，点击提交，显示跳转页面
    location.href = 'http://www.baidu.com';
}
// 6.下一次访问：判断页面是否存在cookie，是否存在username的cookie，若存在自动登录，即自动跳转到百度
var cookies = document.cookie;
//（1）判断页面是否存在cookie，即cookie长度不为0
if(cookies.length>0){
    cookies = cookies.split('; ');
    cookies.forEach(function(item){
        var arr = item.split('=');
        //（2）是否存在username的cookie
        if(arr[0] === 'username'){
            location.href = 'http://www.baidu.com';
        }
    });
}

三、cookie的组成

（一）、设置（存储）

1、document.cookie = "cname=cval[; expires=日期对象的字符串]"

参数：

（1.1）expires 设置期限

*、默认情况下，为临时存储
*、d.toUTCString() 具体日期（toUTCString()将时间d转为字符串）

（1.2） path 设置cookie的存储路径

* 默认路径为当前文件所在的文件夹
* / 根目录
例：
document.cookie = "car=aodi; expires="+d.toUTCString()+"; path=/";

2、获取：document.cookie

从当前文件夹往上找到根目录的所有cookie

案例：封装cookie的操作

var Cookie = {
    get:function(key){
        // 1.先获取所有cookie，若cookie没有值，返回空字符串
        var cookies = document.cookie;
        if(cookies.length === 0){
            return '';
        }
        // 2.拆分每一个cookie
        cookies = cookies.split('; ');
        for(var i=0;i<cookies.length;i++){
            var arr = cookies[i].split('=');
            if(arr[0] === key){
                return arr[1];
            }
        }
    },
    set:function(key,value,date,path){
        //拼接字符串
        var str = key + '=' + value;
        if(date){
            str += ';expires=' + date.toUTCString();
        }
        if(path){
            str += ';path='+path;
        }
        document.cookie = str;
    },
    remove:function(key,path){
        //获取过期的日期，重新设置cookie
        var d = new Date();
        d.setDate(d.getDate()-1);
        this.set(key,'x',d,path);
    },
​
    // 清空cookie
    clear:function(){
    }
}

四、cookie的限制

1、数量50个（不同浏览器值不同）

2、大小2m（不同浏览器值不同）

3、只能写入字符串

五、JSON字符串'{"name":"lemon","price":98.88}';

1、格式

（2.1）属性名和字符串必须使用双引号
（2.2）不能有注释
（2.3）不能存在多余逗号

2、属性值必须为以下类型

（2.1）String
（2.2）Number
（2.3）Boolean
（2.4）Object
（2.5）Array
（2.6）Null

3、转换

（3.1）对象/数组 -> json字符串：JSON.stringify(数组||对象)
（3.2）json字符串 -> 对象/数组：JSON.parse()
备注：空字符串不能通过JSON.parse()转成对象，会报错：Unexpected end of JSON input（该内容不是json字符串）
（3.3） eval("("+json字符串+")"); 
它的作用是，将一个普通的json格式的字符串，转换成Json格式的对象
var list = eval("("+request.responseText+")");

保存购物车信息：思路历程：一个个存储商品信息，这样子就不清楚那几条描述的是同一个商品==>用对象存储同一个商品的信息==>用数组存储多个商品信息==> document.cookie只能存储字符串==>数组转成json字符串进行存储

案例：将商品添加到购物车列表

// 3.每次刷新，拿到上一次的存放值。第一次是为空数组
// * 若已经存在值，默认为JSON字符串，要转回数组
var goodslist = Cookie.get('goodslist') || [];
if(typeof goodslist === 'string'){
    goodslist = JSON.parse(goodslist);
}
// 1.利用事件委托实现添加到购物车的效果
goods.onclick = function(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.parentNode.className === 'add2cart'){
        // 2.若当前为按钮被点击
        // （1）生成一个商品信息对象{guid，name，imgurl，price，qty（商品数量）}
        // （2）推入数组，将数组添加到cookie里面
        // （3）考虑如果商品信息已经添加过，则应该增加数组里面的该商品数量
        //  * 第一步:判断当前的guid是否在数组存在。
        //  * 第二步:若存在，拿到该商品信息在数组中的索引，利用索引将qty++
        var currentLi = target.parentNode.parentNode;
        var guid = currentLi.getAttribute('data-guid');
        var idx;
        var has = goodslist.some(function(g,i){
            idx = i;
            return g.guid === guid;
        });
        if(has){
            goodslist[idx].qty++;
        }else{
            var goods = {
                guid:guid,
                name:currentLi.children[1].innerText,
                imgurl:currentLi.children[0].src,
                price:currentLi.children[2].innerText,
                // 商品数量
                qty:1
            }
            goodslist.push(goods);
        }
        document.cookie = 'goodslist='+ JSON.stringify(goodslist);
    }

案例：显示购物车列表

//1.获取goodslist的cookie，根据cookie数据生成html结构
//2.遍历时同时计算总价给subPrice元素赋值
var goodslist;
render();
function render(){
    goodslist = Cookie.getCookie('goodslist') || [];
    if(typeof goodslist === 'string'){
        goodslist = JSON.parse(goodslist);
    }
    //2.遍历时，同时计算商品金额
    var total = 0;
    var ul = document.createElement('ul');
    ul.innerHTML = goodslist.map(function(goods){
        total += goods.price * goods.qty;
        return '<li data-guid="'+goods.guid+'">' + 
            '<img src="'+goods.imgurl+'">' + 
            '<h4>'+goods.name+'</h4>' + 
            '<p class="price">价格：<span>'+goods.price+'&times;'+goods.qty+'</span></p>' + 
            '<span class="btn-close">&times;</span>' + 
            '</li>'；
    }).join('');
    carList.innerHTML = '';
    carList.appendChild(ul);
    subPrice.innerHTML = total.toFixed(2);
}
// 3.点击按钮，移除cookie数据，重新渲染商品列表。同时阻止浏览器默认行为
btnClear.onclick = function(){
    Cookie.remove('goodslist');
    render();
    return false;
}
//4.当点击某个商品的删除时
//（1）获取到当前商品的guid，遍历数组goodslist，根据guid值相同，找到被删除的元素在数组中的索引。
//（2）通过索引，删除goodslist的中的某个商品。之后推出循环
//（3）重新生成cookie后，渲染
carList.onclick = function(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.className === 'btn-close'){
        var currentLi = target.parentNode;
        var guid = currentLi.getAttribute('data-guid');
        for(var i=0;i<goodslist.length;i++){
            if(goodslist[i].guid === guid){
                goodslist.splice(i,1);
                break;
            }
        }
        Cookie.set('goodslist',JSON.stringify(goodslist));
        render();
    }
}