瀏覽器多個(gè)標(biāo)簽頁之間的通信之cookie篇

feng409 發(fā)布于2019-08-20 12:34 / 775人閱讀

摘要：如何解決瀏覽器多個(gè)標(biāo)簽頁之間的通信使用使用使用和概念簡單理解就是一種可以讓服務(wù)器在客戶端的硬盤或者內(nèi)存里面存儲(chǔ)少量數(shù)據(jù)或者說從客戶端硬盤讀取數(shù)據(jù)的技術(shù)的存放形式的信息是以名值形式保存一個(gè)名值僅僅是一條信息保存位置是，隱藏文件的功能多

如何解決瀏覽器多個(gè)標(biāo)簽頁之間的通信?

使用cookie

使用web worker

使用localeStorage和sessionStorage

概念

cookie簡單理解就是一種可以讓服務(wù)器在客戶端的硬盤或者內(nèi)存里面存儲(chǔ)少量數(shù)據(jù),或者說從客戶端硬盤讀取數(shù)據(jù)的技術(shù).

cookie的存放形式

cookie的信息是以名/值形式保存,一個(gè)名/值僅僅是一條信息

cookie保存位置

window7是C:UsersAdministratorCookies，隱藏文件(.txt).

cookie的功能

多用來記錄用戶的個(gè)人信息.畢竟HTTP是無狀態(tài)的協(xié)議.

cookie的工作原理

用戶在瀏覽器輸入url,發(fā)送請求,服務(wù)器接受請求

服務(wù)器在響應(yīng)報(bào)文中生成一個(gè)Set-Cookie報(bào)頭,發(fā)給客戶端

瀏覽器取出響應(yīng)中Set-Cookie中內(nèi)容,以cookie.txt形式保存在客戶端

如果瀏覽器繼續(xù)發(fā)送請求,瀏覽器會(huì)在硬盤中找到cookie文件,產(chǎn)生Cookie報(bào)頭,與HTTP請求一起發(fā)送.

服務(wù)器接受含Cookie報(bào)頭的請求,處理其中的cookie信息,找到對應(yīng)資源給客戶端.

瀏覽器每一次請求都會(huì)包含已有的cookie.

圖解基本的cookie知識點(diǎn)

cookie 是有大小限制的

每一個(gè)cookie都是合法格式的名值對

cookie是有有效期的(Expires)

cookie有domain域的概念,不同的域是不能進(jìn)行訪問的.可以通過設(shè)置document.domain來實(shí)現(xiàn)一些跨域.

cookie中的path路徑,一個(gè)頁面產(chǎn)生的cookie只能被與這個(gè)頁面的同一目錄或者是其子目錄下的頁面訪問(同源策略).

cookie的兩種形式

短暫性的：瀏覽器關(guān)閉后或者頁面關(guān)閉后就刪除cookie

具有有效期的(設(shè)置了有效時(shí)間),瀏覽器關(guān)閉依然存在硬盤

js操作cookie

獲取cookie

console.log(document.cookie)

//"r_user_id=f7aae2bb-6810-4ec9-b4c7-fbf2fe1e0738; PHPSESSID=web4~7rgfe5mbsjam50en9sujerd085;"

對cookie進(jìn)行存/改

document.cookie="key=value"

//key存在就修改為value,不存在就創(chuàng)建

讀取對應(yīng)的cookie值


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 "";
     }


}

cookie有效期的設(shè)置

//第一種
function setCookie(c_name, value, expiredays){



 　　　　var exdate=new Date();//生成當(dāng)天一個(gè)時(shí)間

　　　　exdate.setDate(exdate.getDate() + expiredays);//獲取當(dāng)天時(shí)間的天數(shù)+有效期天數(shù)



　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
   //設(shè)置cookie

 　　}

//第二種

function setCookie(cname, cvalue, exdays) {

    var d = new Date();

    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

``

原理都是一樣:格式不同.



- 刪除cookie(設(shè)置有效時(shí)間過期)

//刪除cookies
function clearCookie(name) {

setCookie(name, "", -1);

}

//刪除cookies
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();

}

代碼不放在服務(wù)器在chrome瀏覽器下不能處理cookie貌似


 > cookie的路徑訪問原則

　默認(rèn)情況下，只有與創(chuàng)建了cookie 的頁面在同一個(gè)目錄或子目錄下的網(wǎng)頁才可以訪問這個(gè)cookie.

www.csdn.cn/blog/a.html 創(chuàng)建了cookie

www.csdn.cn/blog/b.html 就可以訪問這個(gè)cookie頁(同一目錄)

www.csdn.cn/blog/xyz/c.html 也可以訪問這個(gè)cookie頁(字目錄)

www.csdn.cn/xx/d.html 就不可以訪問

如何跨域這個(gè)障礙呢?

原理:設(shè)置cookie到一個(gè)更高一級別的目錄下(前面那個(gè)例子就可以把path="/")

document.cookie = "name=value;expires=date;path=path"

最常用的例子就是讓 cookie 在根目錄下,這樣不管是哪個(gè)子頁面創(chuàng)建的 cookie，所有的頁面都可以訪問到了

document.cookie = "key=value;path=/"


 > cookie的域

引出這個(gè)話題是因?yàn)?設(shè)置path只能解決同域下的cookie訪問問題.不同域的cookie怎么訪問?

www.csdn.cn 與 qq.csdn.cn ,如果后者想訪問前者的cookie.

就要讓www.csdn.cn這么設(shè)置

document.cookie = "key = value;path=/;domain=csdn.cn"

 > cookie的編碼格式

在對cookie設(shè)置讀取時(shí)候記得處理編碼問題

GPU云服務(wù)器云服務(wù)器 html瀏覽標(biāo)簽頁之基礎(chǔ)篇兩臺服務(wù)器之間的通信標(biāo)簽頁切換

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81056.html

發(fā)表評論

登陸后可評論

0條評論

feng409

男|高級講師

我要關(guān)注我要私信

TA的文章

pycharm怎么安裝tensorflow

閱讀 2513·2023-04-25 17:27
移動(dòng)端適配方案

閱讀 1824·2019-08-30 15:54
關(guān)于css3的陰影遮蓋問題的小研究

閱讀 2369·2019-08-30 13:06
css3的3D

閱讀 2980·2019-08-30 11:04
JS基礎(chǔ)入門篇（十二）—對象

閱讀 746·2019-08-29 15:30
兩個(gè)常規(guī)的頁面布局方式

閱讀 729·2019-08-29 15:16
Proxy 的巧用

閱讀 1733·2019-08-26 10:10
2019干掉手機(jī)uc瀏覽器的底部強(qiáng)制廣告

閱讀 3603·2019-08-23 17:02

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

瀏覽器多個(gè)標(biāo)簽頁之間的通信之cookie篇

相關(guān)文章

前端面試題1（HTML篇）

前端面試題1（HTML篇）

前端面試題1（HTML篇）

**localStorage、sessionStorage、Cookie的區(qū)別及用法**

發(fā)表評論

0條評論

feng409

男|高級講師

TA的文章

pycharm怎么安裝tensorflow

移動(dòng)端適配方案

關(guān)于css3的陰影遮蓋問題的小研究

css3的3D

JS基礎(chǔ)入門篇（十二）—對象

兩個(gè)常規(guī)的頁面布局方式

Proxy 的巧用

2019干掉手機(jī)uc瀏覽器的底部強(qiáng)制廣告

最新活動(dòng)