返回目录：设置问题
大家都了解的cookie
很多前端面试题都会考察cookie 大家一般都能答上的几个点：
- 不能跨域
- 存储空间有限，4KB
- 通过document.cookieAPI进行get和set
cookie与其他本地存储的区别
- 大小不同，cookie是最小的。
- 数量受限,每个域名下的cookie数量最多为20个（但很多浏览器厂商在具体实现时支持大于20个)
- 某个域下的cookie会自动随该域下的请求带在request header的cookie字段里。
- 可以设定过期时间。
- 可以设定path，而其他存储往往只有域的限制。
- 存在httpOnly属性，只能由服务端设置，JS无法设置和获取。
- 可以设置secure属性,当设置为true时，只能在HTTPS连接中被浏览器传递到服务器端进行会话验证，如果是HTTP,连接则不会传递该信息，所以不会被窃取到Cookie的具体内容。
- 可以通过浏览器的清除历史功能清除
- 用户可以禁用cookie
cookie的应用场景
- cookie最大的特点是自动随该域下的请求带在request header的cookie字段里，而无需额外的JS操作，在做通用的登录认证系统的时候有着天然的优势。
- cookie有httpOnly属性，可以防止XSS攻击，安全性比其他存储更有保障。
- 服务端在控制页面跳转的时候可以不通过JS方便的进行少量值的传递，控制页面的展示。
- 静态资源CDN之所以放在非主域名下，很大一部分原因在于可以无需携带相关cookie，减少流量损耗。
cookie的属性
cookie的增删改查
服务端和JS端都可以对cookie进行增删改查, cookie中不得包含任何逗号、分号或空格，（可以用encodeURIComponent()来保证）.
服务端设置cookie
服务端通过在请求的response header中携带Set-Cookie字段对cookie进行设置, 格式与用JS设置cookie是相同的,都采用;进行属性分隔. 例如:
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
JS设置cookie
JS设置domain: 默认值为当前域, n级域名可以设置 小于n级域名的domain. 例如: 在www.baidu.com域下 可以将domain设置为 baidu.com, 但是不能设置为a.www.baidu.com, 也不能设置为tieba.baidu.com,更不能设置为sina.com.
JS设置path: 默认为/, path的设置不受限制, 比如我可以在im.baidu.com/todo下将cookie的path设置为/search
JS对于secure属性,无论get还是set ,必须在https下,
JS不能设置httponly属性,
删除cookie: 指定key, domain, path 必须与想要删掉的cookie一模一样, 然后将expires的值设为一个过期值,即可删除.
修改cookie: 指定key, domain, path 必须与想要修改的cookie一模一样, 否则将创建一个不同的cookie,然后设置想要更新的value或expires值.
var cookie = {
getCookie: function (key) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\\\s*" + encodeURIComponent(key).replace(/[\\-\\.\\+\\*]/g, "\\\\$&") + "\\\\s*\\\\=\\\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setCookie: function (opts) {
if (Object.prototype.toString.call(opts) !== "[object Object]") {
return;
}
if (!opts.key) {
return;
}
if (!opts.value) {
opts.value = '';
}
var tmp = opts.key + '=' + encodeURIComponent(opts.value) + ';';
if (opts.expires) {
tmp += 'expires=' + new Date(new Date().getTime() + opts.expires * 1000).toGMTString() + ';';
}
if (opts.path) {
tmp += ('path=' + opts.path + ';');
}
if (opts.domain) {
tmp += ('domain=' + opts.domain + ';');
}
if (opts.secure) {
tmp += 'secure'
}
document.cookie = tmp;
},
delCookie: function (opts) {
cookie.setCookie({
key: opts.key,
value: '',
expired: -1000000000,
path: opts.path,
domain: opts.domain,
})
},
}
其他
判断是否启用cookie
使用navigator.cookieEnabled可以判断用户是否启用cookie
if (!navigator.cookieEnabled) {
// 让用户知道,开启网页中的cookies是很有必要的.
}
是否可以直接修改header中的cookie字段?
Ajax请求可以设置header,但是某些header字段无法设置,比如refer, cookie等.
cookie自动删除
cookie 会被浏览器自动删除，通常存在以下几种原因：
- 会话 cooke (Session cookie) 在会话结束时（浏览器关闭）会被删除
- 持久化 cookie（Persistent cookie）在到达失效日期时会被删除
- 如果浏览器中的 cookie 数量达到限制，那么 cookie 会被删除以为新建的 cookie 创建空间。
CORS请求携带cookie
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。
Access-Control-Allow-Credentials: true
另一方面，开发者必须在AJAX请求中打开withCredentials属性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。
需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
希望本文能帮助到您！
点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）
关注 ｛我｝，享受文章首发体验！
每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”
原文链接：http://eux.baidu.com/blog/fe/%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84cookie
作者：谢郁