JavaScript--操作cookie

Session和cookie都是用来存储数据的

Cookie：位于用户的计算机上，用来维护用户计算机中的信息，直到用户删除，就是存储在你本地的数据，在存储的时候可以设置过期时间，使用场景很多，比如最常见的是用户登录某个网站，登录之后将用户的用户名和密码存cookie ，这样下次再进行访问此网站就不用登录了，因cookie是存储在本地的，所以就算浏览器关闭也不会丢失，除非认为删除，或者时间到期。

Session：是存储在服务端的数据，可以说是用户会话，比如可以存用户的登录信息，浏览器一旦关闭，session就丢失掉，相对cookie会更安全。

总结：

总结：如果我们需要经常登录一个站点时，最好用cookie来保存信息，要不然每次登陆都特别麻烦，如果对于需要安全性高的站点以及控制数据的能力时需要用会话效果更佳，当然我们也可以结合两者，使网站按照我们的想法进行运行

 

概念性的东西就不多了，直接上代码吧，本次案例主要说的是cookie，并利用cookie实现一个小功能

 

取cookie：
function getCookie(name) {           
            var arr = document.cookie.split(';');           
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                var arrTest = arr2[0].trim(); 此处的trim一定要加，个人对这不太理解，之前做项目时候才发现，cookie从第二个开始就会出现空格，你传入的cookie名如果在第一个，就能取出，如果在第二个或者以后，每次取就会有空格，就会匹配不成功              
                if (arrTest == name) {        当然也可以用正则匹配取cookie，这样更好            
                    return arr2[1];
                }
            }

        }

存cookie：
function setCookie(name, value) {
            var date = new Date();
            var expires = 10;
            date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000)
            document.cookie = name + "=" + value + ";expires=" + date.toGMTString() + ";path=" + "/";   后边加入path是因为下方要实现的功能要在其它页面取cookie
        }

删cookie：
function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) {
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            }
        }

 

JavaScript操作cookie案例 ------- 实现商城浏览商品足迹功能

实现思路如下：

当用户点击某个商品时，将商品的主键和当前时间存为对象 因为在绑定商品足迹时候需要拿到商品的主键绑定对应的商品，再定义一个全局数组，将对象存入数组当中，再将数组存入cookie。

在存的时候先获取，查看需要存的cookie是否存在，因为实现整个功能只需要存入一个cookie，一个cookie中存一个大的数组，数组中存多个对象，对象中就是商品的主键和点击商品的当前时间

如果不存在就直接存cookie

如果存在就将cookie取出，将取出的cookie中的对象用for循环遍历，取出每一个对象的主键，于将要存的对象的主键进行比对，如果存在，就将时间改为当前时间，意思就是用户浏览的同一个商品，只把时间换掉就行，如果不存在就直接将对象存入数组中，再存入cookie就行！

JavaScript代码如下：

 

点击商品，获取主键，存足迹：
function Link(TradeId)   //点击商品触发的方法，Tradeid为商品的主键
        {
            var josn = {
                id: TradeId,
                dateTime: GetDateTime()   当前时间
            }
            var arr = new Array();

            if (getCookie("Myfoot") != undefined) {
                var test = "true";
                var obj = JSON.parse(getCookie("Myfoot"));
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i].id == josn.id) {
                        obj[i].dateTime = GetDateTime();
                        test = "false";
                        break;
                    }
                }
                if (test == "true") {
                    obj.push(josn);
                }
                setCookie("Myfoot", JSON.stringify(obj));
            }
            else {
                arr.push(josn);
                setCookie("Myfoot", JSON.stringify(arr));
            }
        }

 

删足迹： 拿到商品的主键，循环比对
function Delfoot(tradeId) {
        var obj = JSON.parse(getCookie("Myfoot"));
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].id == tradeId) {
                obj.splice(i, 1)
                break;
            }
        }
        setCookie("Myfoot", JSON.stringify(obj));
    }

 

获取当前时间：
function GetDateTime() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();  //年
            var month = date.getMonth() + 1;//月
            var strDate = date.getDate();   //日
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate; //拼接当前日期 如: 2019-9-9
            return currentdate;
        }

 

控制器中C#代码如下：

 

public ActionResult Index()
        {
            if (Request.Cookies["Myfoot"] != null) 
            {
                string obj = HttpUtility.UrlDecode(Request.Cookies["Myfoot"].Value);
                StringBuilder str = new StringBuilder();
                JArray newArr = (JArray)JsonConvert.DeserializeObject(obj);
                string nowTid = "";    //当天商品的主键
                string pastTid = "";   //一周内商品的主键
                for (int i = 0; i < newArr.Count; i++)
                {
                    string nowDate = System.DateTime.Now.ToString("yyyy-MM-dd");
                    string pastDate = System.DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd");
                    string time = newArr[i]["dateTime"].ToString();

                    if (time == nowDate)
                    {
                        nowTid = nowTid + newArr[i]["id"] + ",";
                    }
                    if (Convert.ToDateTime(time) > Convert.ToDateTime(pastDate) && Convert.ToDateTime(time) < Convert.ToDateTime(nowDate))
                    {
                        pastTid = pastTid + newArr[i]["id"] + ",";
                    }
                }
                if (nowTid != "") 
                {
                    nowTid = nowTid.Remove(nowTid.Length - 1, 1);
                    //查询当天足迹商品
                    ViewBag.nowList = db.OS_Trade.SqlQuery("SELECT * FROM OS_Trade where TradeId in(" + nowTid + ")");   
                }
                if (pastTid != "")
                {
                    pastTid = pastTid.Remove(pastTid.Length - 1, 1);
                    //查询一周内足迹对应的商品
                    ViewBag.pastList = db.OS_Trade.SqlQuery("SELECT * FROM OS_Trade where TradeId in(" + pastTid + ")");
                }
            }
            //前台直接两个循环绑定数据就行了
            return View();
        }

　好了，到这就结束啦，对cookie的操作还是不太了解，继续学习吧！获取cookie还是用正则匹配较好，代码这里就不写了，网上很多的，努力吧！