同一瀏覽器多個標籤頁之間的通訊(二)——cookie+setInterval
阿新 • • 發佈:2019-02-07
二、cookie
(1)cookie是什麼?
HTTP Cookie,通常直接叫做cookie,最初是在客戶端用於儲存回話資訊的。該標準要求伺服器對任意HTTP請求傳送Set-CookieHTTP頭作為相應的一部分,其中包含回話資訊。瀏覽器會儲存這樣的回話資訊,並在這之後,通過每個請求新增CookieHTTP頭將資訊發回伺服器。
(2)cookie怎麼用?
在JavaScript中,cookie的介面即document.cookie
不太友好,可以自己封裝相應的介面。
基本cookie操作:讀取、寫入、刪除
//程式碼來源於JavaScript高階程式設計 var CookieUtil={ get:function(name){ var cookieName=encodeURIComponent(name)+"=", cookieStart=document.cookie.indexOf(cookieName), cookieValue=null; if(cookieStart>-1){ var cookieEnd=document.cookie.indexOf(";",cookieStart); if(cookieEnd==-1){ cookieEnd=document.cookie.length; } cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } return cookieValue; }, set:function(name,value,expires,path,domain,secure){//cookie的構成:名稱、值、失效時間(何時應停止向瀏覽器傳送cookie)、路徑(向伺服器傳送cookie的特定域的路徑)、域(cookie對於哪個域是有效的)、安全標誌(指定後只能在使用SSL連線時才傳送到伺服器) var cookieText=encodeURIComponent(name) + "=" +encodeURIComponent(value); if(expires instanceof Date){ cookieText += "; expires="+expires.toGMTString();//時間為GMT格式,注意資訊之間用“; ”分割 } if(path){ cookieText += "; path="+path; } if(domain){ cookieText += "; domain="+domain; } if(secure){ cookieText += "; secure"; } document.cookie = cookieText; }, unset:function(name,path,domain,secure){//沒有直接刪除cookie的方法 this.set(name,"",new Date(0),path,domain,secure);//使用相同路徑、域、安全選項再次設定cookie,並將失效時間設定為過去的時間 } };
使用:
//設定cookie
CookieUtil.set("name",'lwf');
CookieUtil.set("age",21);
// 讀取cookie
console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("age"));
// 刪除cookie
CookieUtil.unset("name");
CookieUtil.unset("age");
(3)怎麼使用cookie實現多標籤之間的通訊?
index.html
<input type="text"> <button id="btn">Click</button> <script> window.onload=function(){ var oBtn=document.getElementById("btn"); var oInput=document.getElementsByTagName("input")[0]; oBtn.onclick=function(){ var val=oInput.value; CookieUtil.set("name",val); console.log(CookieUtil.get("name")); } var cookieUtil={//...} } <script>
test.html
window.onload=function(){
var getCookie = function( keyName){
var items = [] , json = {};
var cookie = document.cookie;
if( cookie.length > 0 ){
items = cookie.split(';');
for(var i = 0;i < items.length;i++){
json[items[i].split('=')[0]] = items[i].split('=')[1] ;
}
return unescape(json[keyName]);
}else{
return '';
}
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
};
效果:
4、cookie能實現同一瀏覽器多個標籤頁之間通訊的原理
cookie的path
:一個頁面產生的cookie只能被與這個頁面的同一目錄或者其他子目錄下的頁面訪問。因此,通常把cookie的path設定為一個更高級別的目錄,從而使更多的頁面共享cookie,實現多頁面之間相互通訊。
補充: path
:cookie所在的目錄,預設為/,即根目錄, 通常用來解決同域下cookie的訪問問題
domain
:cookie所在的域,預設為請求的地址,通多設定document.domain
可以實現跨域訪問