关于Cookie的简单总结

EscapedDog 发布于2019-08-22 16:48 / 990人阅读

摘要：通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。使基于无状态的协议记录稳定的状态信息成为了可能。另外，的过期时间域路径有效期适用站点都可以根据需要来指定。

Cookie简介

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面:

回话状态管理(例如用户登录状态 , 购物车等)

个性化设置(如用户自定义设置,主题等)

浏览器行为跟踪 (如跟踪分析用户行为等)

创建Cookie

当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

Set-Cookie: =

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[页面内容]

现在，对该服务器发起的每一次新请求，浏览器都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

客户端获取Cookie

客户端可以通过如下代码获取Cookie值.

 document.cookie

代码实现获取各个cookie值

var Cookie = {};
var cookie = document.cookie;
var tempArr = cookie.split(";");
var len = tempArr.length;

for(var i = 0; i < len; i++){
    var tempCookie = tempArr[i];
    var p = tempCookie.indexOf("=");
    var key = tempCookie.substring(0,p);
    var value = tempCookie.substring(p+1);
    value = decodeURIComponent(value);
    Cookie[key] = value;
}

获取结果:

另外除了在控制台去打印,在chrome的调试器中也可以看到cookie信息.

Cookie 必须在 HTML 文件的内容输出之前设置；不同的浏览器 (Netscape Navigator、Internet Explorer) 对 Cookie 的处理不一致，使用时一定要考虑；客户端用户如果设置禁止 Cookie，则 Cookie 不能建立。 并且在客户端，一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个

设置Cookie

var setCookie = function(key,value,expires){
    var iDay = new Date();
    var maxTime = iDay.setDate(iDay.getDate() + expires);
    document.cookie = key + "=" + value + "; " + "expires=" + maxTime;
};

删除Cookie值

var deleteCookie = function(key){   
    setCookie(key,"",-1);
}

GPU云服务器云服务器 cookie的使用对于云计算的总结 ie的cookie管理 java中cookie的作用

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

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

关于跨域的总结

摘要：关于跨域，个人总结了以下几种方法其中等方法常用，的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。这个主要针对跨域访问的情况两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置共享。关于跨域，个人总结了以下几种方法 JSONP CORS WebSocket document.domain window.name location.hash postMessa...

lunaticf 2019-08-22 18:47 评论0 收藏0
关于跨域简单总结

摘要：开发者需要在中设置属性为跨域是的简称这是一种利用浏览器漏洞解决跨域的办法脚本元素可以不受浏览器同源策略的限制。什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(...

learning 2019-08-22 16:45 评论0 收藏0
关于前端跨域总结

摘要：前端开发中，跨域使我们经常遇到的一个问题，也是面试中经常被问到的一些问题，所以，这里，我们做个总结。同源策略限制了一下行为和无法读取和对象无法获取请求发送不出去常见的跨域场景所谓的同源是指，域名协议端口均为相同。前端开发中，跨域使我们经常遇到的一个问题，也是面试中经常被问到的一些问题，所以，这里，我们做个总结。小小问题，不足担心原文地址：YOU-SHOULD-KNOW-JS 什么是...

muddyway 2019-08-21 18:25 评论0 收藏0
express简单总结

摘要：介绍如有不详细或者不正确的地方多多指正。可以通过官方提供的命令行进行安装，官方目前默认的界面文件用格式，建议修改为格式的文件版权问题，同时要在中安装对应的包和设置对应的界面引擎解释器。 express介绍如有不详细或者不正确的地方多多指正。我们可以拿js与jquery关系来类比一下： jQuery是JS在浏览器环境下的封装库，把DOM操作，ajax等封装成了兼容性好，方便使用的方法...

ivyzhang 2019-08-22 13:52 评论0 收藏0