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還是用正則匹配較好，代碼這里就不寫了，網上很多的，努力吧！