在這個前端橫行的時候,頁面之間的互動需要資料的傳遞,有的資料通過url傳參的形式可以很好地解決,但是對於部分需要改變的引數,你如說從頁面A到頁面B選擇資料,然後從頁面B將資料再傳到頁面A(典型的栗子就是收貨地址的選擇),針對這一塊我是通過儲存cookie來解決的。
對於cookie的操作我給出了一些簡單的封裝,當然也借鑑了前輩們經驗,自己糅合了一下,對於cookie的操作,無非是讀寫和刪除,我們首先來看一下寫的操作,有寫才有讀,進而進行刪除等操作。
/**
* 設定COOKIE
* @param name 設定cookie的屬性名
* @param value 設定cookie的屬性值
* @param time 設定cookie的時間
*/
function setCookie(name, value , time) {
time = time ? parseFloat(time) : 0 ;
var exp = new Date();
exp.setTime(exp.getTime() + time);
// escape 這種編碼方式過時了 改用 encodeURIComponent
// document.cookie = name + "=" + escape(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
}
複製程式碼
我們有了寫的操作了,那麼我們再來看看對於讀的操作。
/**
* 獲取cookie
* @param name
* @returns {null}
*/
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
//unescape這種解碼方式好像過時了,可以採用decodeURIComponent解碼方式
//return unescape(arr[2]);
return decodeURIComponent(arr[2]);
else
return null;
}
複製程式碼
接下就是對cookie的刪除操作了,其實這個操作很簡單,就是將cookie設定過期,cookie就自動失效了
/**
* 刪除cookie
* @param name
*/
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();
}
複製程式碼
以上就是對cookie的一些簡單操作
接下來我們來談一點cookie的深層次的問題:cookie的跨域
Js跨域同步cookie怎麼實現
document.cookie = "name=" + "value;" + "expires=" + "datatime;" + "domain=" + "" + "path=" + "/path" + "; secure";
/**
* 刪除cookie
* value Cookie值
* expires 有效期截至(單位毫秒)
* path 子目錄
* domain 有效域
* secure 是否安全
*/
<iframe src='http://網站:1234/test/Index' width='100' height='100' style="display:none"></iframe>
/*
*原頁面js裡 window.location = "http://另外一個網站:1234/GetCookie/Index?" + document.cookie;跳到另外一個站,另外一個站獲取cookie,設定cookie
*/
var url = window.location.toString();//獲取地址
var get = url.substring(url.indexOf("liuph"));//獲取變數和變數值
var idx = get.indexOf("=");//獲取變數名長度
if (idx != -1) {
var name = get.substring(0, idx);//獲取變數名
var val = get.substring(idx + 1);//獲取變數值
setCookie(name, val, 1);//建立Cookie
}
複製程式碼
以上就是今天對cookie的解讀,如果有不同意見歡迎指正交流,喜歡的朋友可以給喜歡讚賞支援 (*  ̄3)(ε ̄ *)