JavaScript把动态数据存入cookie

JavaScript把动态数据存入cookie

直接上代码:

var msg = [];
// 先读取当前cookie
var Msg;
var cookies = document.cookie.split('; ');
console.log(cookies);
for(var i=0;i<cookies.length;i++){
    var arr = cookies[i].split('=');
    if(arr[0] === 'msg'){
        console.log(JSON.parse(arr[1]));
        Msg = JSON.parse(arr[1]);
        console.log(Msg)
    }
}
//如果cookie不为空 则把数据渲染至页面
if (Msg != ''){
    for(var i=0;i<Msg.length;i++){
        $('.StaffMention-top-right p').attr('userid',Msg[i].userid);
        new Vue({
            el:'.StaffMention-top-right p',
            data:{
                name_peo:Msg[i].username
            }
        });
    }
}
console.log(msg);
var msgobj = {};
msgobj.zml = 1;
//token,userid,username,chain_user_id 均为动态获取的数据
msgobj.token = token;		
msgobj.userid = userid;
msgobj.username = username;
msgobj.chain_user_id = chain_user_id;
console.log(msgobj);
// 如果cookie为空，则直接添加
if(msg.length===0){         // 添加到msg
    msg.push(msgobj);
}else{
    // 先判断cookie中有无相同的数据
    for(var i=0;i<msg.length;i++){
        //如果tooken相同则标识+1
        if(msg[i].token === token){
            msg[i].zml++;
            break;
        }
    }
    // 如果原cookie中没有数据
    if(i===msg.length){
        // 添加到msg
        msg.push(msgobj);
    }
}
// 存入cookie
// 把对象/数组转换诚json字符串：JSON.stringify()
document.cookie = 'msg=' + JSON.stringify(msg);

购物车应用 
购物车删除商品 删除cookie数据：

oCarList.onclick = function(e){
        e = e || window.event;
        var target = e.target || e.srcElement;
        // 是否点击了删除按钮
        if(target.className === 'btn-close'){
            // 获取当前guid
            var currentLi = target.parentElement.parentElement.parentElement;
            // 删除cookie中对应的商品
            var currentGUID = currentLi.getAttribute('data-guid');
            layer.open({
                type: 1,
                title :'是否删除该商品',
                content: '<p style="text-align:center;padding:10px;">望施主三思~~！</p>',
                scrollbar: false,
                btn: ['取消', '确定'],
                yes: function(index, layero){
                    //取消按钮的回调
                    layer.close(index);
                    layer.msg('您取消删除该商品')
                },
                btn2: function(index, layero){
                    //确定按钮的回调
                    // 根据guid取对比
                    for(var i=0;i<carList.length;i++){
                        // 找出要删除的商品
                        if(carList[i].guid === currentGUID){
                            carList.splice(i,1);
                            break;
                        }
                    }
                    // 更新cookie
                    document.cookie = 'carlist=' + JSON.stringify(carList);
                    // 删除li节点
                    currentLi.parentElement.removeChild(currentLi);
                    var newmon = 0;
                    $('.StaffMention-bottom__allnum').html(newmon.toFixed(2));
                    layer.msg('您已成功删除该商品')
                }
            });
        }
    };

清空购物车清空cookie：利用设置有效期位过期事件来达到删除cookie的效果

    // 1、删除DOM节点
    // 2、删除cookie
    var btnClear = document.getElementById('btnClear');
    btnClear.onclick = function(){
        layer.open({
            type: 1,
            title :'是否清空购物车',
            content: '<p style="text-align:center;padding:10px;">望施主三思~~！</p>',
            scrollbar: false,
            btn: ['取消', '确定'],
            yes: function(index, layero){
                //取消按钮的回调
                layer.close(index);
                layer.msg('您取消了清空购物车')
            },
            btn2: function(index, layero){
                //确定按钮的回调
                oCarList.innerHTML = '';
                // 利用设置有效期位过期事件来达到删除cookie的效果
                var now = new Date();
                now.setDate(now.getDate()-7);
                document.cookie = 'carlist=xx;expires=' + now;
                layer.msg('清空购物车已清空，请重新选购商品');
                var newmon = 0;
                $('.StaffMention-bottom__allnum').html(newmon.toFixed(2));
            }
        });

    }

若代码有问题,请多多指教~~谢谢各路大神