js使用cookie

原文地址:http://www.maoyupeng.com/use-cookie-on-javascript.html

cookie存儲中文亂碼問題

使用js期間,若是存儲的數據存在中文,則可能會遇到兼容性的問題.我先說說我遇到的問題(不要心急,在後面會提供完整的代碼案例):

1. 在安卓的手機上使用微信打開個人測試網頁,存儲中文沒有問題,一切正常(不敢包因此安卓機,反正我當時用的的小米4是沒有遇到有中文亂碼的問題)

2. 在ios的手機上使用微信打開個人測試網頁,存儲中文會出現詭異的問題,具體狀況請看示例 ↓

安卓手機

var setAndroidValue = {
    cityId: 197,
    cityName: '廣州'
}
cookie.set('androidTestCookie',setAndroidValue,30);

// 存儲成功後,獲取的值爲,一切正常
console.log(JSON.stringify(cookie.get('androidTestCookie')))  //{cityId: 197,cityName: '廣州'}

ios手機

var setAndroidValue = {
    cityId: 197,
    cityName: '廣州'
}
cookie.set('androidTestCookie',setAndroidValue,30);

// 存儲成功後,獲取的值缺乏了一截,我的估計就是由於遇到中文了,亂碼,沒有存儲進去
console.log(JSON.stringify(cookie.get('androidTestCookie')))  //{cityId: 197,cityName: '

解決存儲cookie亂碼問題

其實很簡單,就是使用了escape()和unescape()函數

escape(string)
函數可對字符串進行編碼，這樣就能夠在全部的計算機上讀取該字符串。返回值:已編碼的 string 的副本。其中某些字符被替換成了十六進制的轉義序列。

unescape(string)
跟escape()恰好相反,就是解碼的

完整的示例代碼

var cookie = {
    set:function(key,val,time){//設置cookie方法
        var date=new Date(); //獲取當前時間
        var expiresDays=time;  //將date設置爲n天之後的時間
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化爲cookie識別的時間
        document.cookie=key + "=" + escape(val) +";expires="+date.toGMTString();  //設置cookie
    },
    get:function(key){//獲取cookie方法
        /*獲取cookie參數*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //獲取cookie，而且將得到的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //將得到的cookie以"分號"爲標識 將cookie保存到arrCookie的數組中
        var tips;  //聲明變量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循環查找cookie中的tips變量
            var arr=arrCookie[i].split("=");   //將單條cookie用"等號"爲標識，將單條cookie保存爲arr數組
            if(key==arr[0]){  //匹配變量名稱，其中arr[0]是指的cookie名稱，若是該條變量爲tips則執行判斷語句中的賦值操做
                tips=arr[1];   //將cookie的值賦給變量tips
                break;   //終止for循環遍歷
            }
        }
        return unescape(tips);
    }
}

使用方法

cookie.set('key','value,中文也能夠的',30)  //30天后失效

cookie.get('key')   // value,中文也能夠的