document.cookie 中汉字bug问题处理（IPhone不能在cookie中写入中文字符的解决办法）

有时候我们将json对象的数据转成string 存入cookie中时，要是json中有汉字或者其他特殊字符，可能在cookie里面不会全部存下来。

比如以下代码在存入汉字时（在Android手机上能正常运行，iOS上cookie中存汉字bug）

 function WebCookie() {
     this.setToken = function setToken(token) {
         var exdate = new Date(); //获取时间
         exdate.setTime(exdate.getTime() + 60 * 60 * 1000 * 10); //保存的时间

         console.log("setToken:", token);
         var strToken = window.JSON.stringify(token); 
         console.log("strToken:", strToken);
         //字符串拼接cookie
         document.cookie =
             "token" + "=" + strToken + ";path=/;expires=" + exdate.toGMTString();
     };
     this.getToken = function setToken() {
         var cookieName = "token";
         var token = "";
         if (document.cookie && document.cookie != "") {
             var cookies = document.cookie.split(";"); //将获得的所有cookie切割成数组
             for (var i = 0; i < cookies.length; i++) {
                 var coo = cookies[i];
                 //得到某下标的cookies数组
                 if (
                     coo.substring(0, cookieName.length + 2).trim() ==
                     cookieName.trim() + "="
                 ) {
                     //如果存在该cookie的话就将cookie的值拿出来
                     token = coo.substring(cookieName.length + 2, coo.length);
                     break;
                 } else if (
                     coo.substring(0, cookieName.length + 1).trim() ==
                     cookieName.trim() + "="
                 ) {
                     //如果存在该cookie的话就将cookie的值拿出来
                     token = coo.substring(cookieName.length + 1, coo.length);
                     break;
                 } else {}
             }
         }
         if (token == "") {
             token = '{}';
         } 
         console.log("getToken:", token);
         return window.JSON.parse(token);
     }
 }

 function UtilHelper() {
     //是否为微信浏览器
     this.isWeiXinBrowser = function isWeiXinBrowser() {
         var ua = window.navigator.userAgent.toLowerCase();
         if (ua.match(/MicroMessenger/i) == 'micromessenger') {
             return true;
         } else {
             return false;
         }
     };
     //是否为支付宝浏览器
     this.isAlipayBrowser = function isAlipayBrowser() {
         var ua = window.navigator.userAgent.toLowerCase();
         if (ua.match(/Alipay/i) == 'alipay') {
             return true;
         } else {
             return false;
         }
     };

     this.getUrlKey = function getUrlKey(name, url) {　　
         return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
     }
 }
 module.exports = {
     cookie: new WebCookie(),
     util: new UtilHelper()
 }

解决方案

就是 将字符 转码后再存入cookie中，取出后在解码，代码如下

 function WebCookie() {
     this.setToken = function setToken(token) {
         var exdate = new Date(); //获取时间
         exdate.setTime(exdate.getTime() + 60 * 60 * 1000 * 10); //保存的时间

         console.log("setToken:", token);
         var strToken = window.JSON.stringify(token);
         //转码
         strToken = window.encodeURIComponent(strToken)
         console.log("strToken:", strToken);
         //字符串拼接cookie
         document.cookie =
             "token" + "=" + strToken + ";path=/;expires=" + exdate.toGMTString();
     };
     this.getToken = function setToken() {
         var cookieName = "token";
         var token = "";
         if (document.cookie && document.cookie != "") {
             var cookies = document.cookie.split(";"); //将获得的所有cookie切割成数组
             for (var i = 0; i < cookies.length; i++) {
                 var coo = cookies[i];
                 //得到某下标的cookies数组
                 if (
                     coo.substring(0, cookieName.length + 2).trim() ==
                     cookieName.trim() + "="
                 ) {
                     //如果存在该cookie的话就将cookie的值拿出来
                     token = coo.substring(cookieName.length + 2, coo.length);
                     break;
                 } else if (
                     coo.substring(0, cookieName.length + 1).trim() ==
                     cookieName.trim() + "="
                 ) {
                     //如果存在该cookie的话就将cookie的值拿出来
                     token = coo.substring(cookieName.length + 1, coo.length);
                     break;
                 } else {}
             }
         }
         if (token == "") {
             token = '{}';
         }
         //解码
         token = window.decodeURIComponent(token);
         console.log("getToken:", token);
         return window.JSON.parse(token);
     }
 }

 function UtilHelper() {
     //是否为微信浏览器
     this.isWeiXinBrowser = function isWeiXinBrowser() {
         var ua = window.navigator.userAgent.toLowerCase();
         if (ua.match(/MicroMessenger/i) == 'micromessenger') {
             return true;
         } else {
             return false;
         }
     };
     //是否为支付宝浏览器
     this.isAlipayBrowser = function isAlipayBrowser() {
         var ua = window.navigator.userAgent.toLowerCase();
         if (ua.match(/Alipay/i) == 'alipay') {
             return true;
         } else {
             return false;
         }
     };

     this.getUrlKey = function getUrlKey(name, url) {　　
         return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
     }
 }
 module.exports = {
     cookie: new WebCookie(),
     util: new UtilHelper()
 }