浏览器多个标签页之间的通信之cookie篇

feng409 发布于2019-08-20 12:34 / 581人阅读

摘要：如何解决浏览器多个标签页之间的通信使用使用使用和概念简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据或者说从客户端硬盘读取数据的技术的存放形式的信息是以名值形式保存一个名值仅仅是一条信息保存位置是，隐藏文件的功能多

如何解决浏览器多个标签页之间的通信?

使用cookie

使用web worker

使用localeStorage和sessionStorage

概念

cookie简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据,或者说从客户端硬盘读取数据的技术.

cookie的存放形式

cookie的信息是以名/值形式保存,一个名/值仅仅是一条信息

cookie保存位置

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

cookie的功能

多用来记录用户的个人信息.毕竟HTTP是无状态的协议.

cookie的工作原理

用户在浏览器输入url,发送请求,服务器接受请求

服务器在响应报文中生成一个Set-Cookie报头,发给客户端

浏览器取出响应中Set-Cookie中内容,以cookie.txt形式保存在客户端

如果浏览器继续发送请求,浏览器会在硬盘中找到cookie文件,产生Cookie报头,与HTTP请求一起发送.

服务器接受含Cookie报头的请求,处理其中的cookie信息,找到对应资源给客户端.

浏览器每一次请求都会包含已有的cookie.

图解基本的cookie知识点

cookie 是有大小限制的

每一个cookie都是合法格式的名值对

cookie是有有效期的(Expires)

cookie有domain域的概念,不同的域是不能进行访问的.可以通过设置document.domain来实现一些跨域.

cookie中的path路径,一个页面产生的cookie只能被与这个页面的同一目录或者是其子目录下的页面访问(同源策略).

cookie的两种形式

短暂性的：浏览器关闭后或者页面关闭后就删除cookie

具有有效期的(设置了有效时间),浏览器关闭依然存在硬盘

js操作cookie

获取cookie

console.log(document.cookie)

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

对cookie进行存/改

document.cookie="key=value"

//key存在就修改为value,不存在就创建

读取对应的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有效期的设置

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



 　　　　var exdate=new Date();//生成当天一个时间

　　　　exdate.setDate(exdate.getDate() + expiredays);//获取当天时间的天数+有效期天数



　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
   //设置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(设置有效时间过期)

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

}

代码不放在服务器在chrome浏览器下不能处理cookie貌似


 > cookie的路径访问原则

　默认情况下，只有与创建了cookie 的页面在同一个目录或子目录下的网页才可以访问这个cookie.

www.csdn.cn/blog/a.html 创建了cookie

www.csdn.cn/blog/b.html 就可以访问这个cookie页(同一目录)

www.csdn.cn/blog/xyz/c.html 也可以访问这个cookie页(字目录)

www.csdn.cn/xx/d.html 就不可以访问

如何跨域这个障碍呢?

原理:设置cookie到一个更高一级别的目录下(前面那个例子就可以把path="/")

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

最常用的例子就是让 cookie 在根目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了

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


 > cookie的域

引出这个话题是因为,设置path只能解决同域下的cookie访问问题.不同域的cookie怎么访问?

www.csdn.cn 与 qq.csdn.cn ,如果后者想访问前者的cookie.

就要让www.csdn.cn这么设置

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

 > cookie的编码格式

在对cookie设置读取时候记得处理编码问题

服务器托管云服务器 html浏览标签页之基础篇两台服务器之间的通信标签页切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81056.html

前端面试题1（HTML篇）

摘要：不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。又称内核及以上版本，等内核及以上。内核原为，现为内核等。如果不能确定时，首选使用自然样式标签 HTML 语义化 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class 为什么需要语义化：去...

zollero 2019-08-22 17:28 评论0 收藏0
前端面试题1（HTML篇）

摘要：不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。又称内核及以上版本，等内核及以上。内核原为，现为内核等。如果不能确定时，首选使用自然样式标签 HTML 语义化 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class 为什么需要语义化：去...

starsfun 2019-08-29 15:30 评论0 收藏0
前端面试题1（HTML篇）

摘要：不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。又称内核及以上版本，等内核及以上。内核原为，现为内核等。如果不能确定时，首选使用自然样式标签 HTML 语义化 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class 为什么需要语义化：去...

Anshiii 2019-08-02 10:31 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 评论0 收藏0