你可能不知道的cookie
栏目: JavaScript · 发布时间: 7年前
内容简介:你可能不知道的cookie
by. 谢, 郁 2 小时前
大家都了解的cookie
很多前端面试题都会考察cookie 大家一般都能答上的几个点:
- 不能跨域
- 存储空间有限,4KB
-
通过
document.cookie
API进行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的属性
属性 |
说明 |
示例 |
---|---|---|
name | cookie的key值 | ‘id=sdbsdabsdsa;’ |
expires | 到期时间 | ‘expires=21 Oct 2015 07:28:00 GMT |
domain | cookie生效的域 | ‘domain=im.baidu.com;’ |
path | cookie生效的路径 | ‘path=/todo’ |
secure | 是否只在https下生效 | ‘secure’ |
httponly | 是否允许JS获取 | ‘httponly’ |
max-age | 以秒为单位设置过期时间,IE6\7\8不生效 | ‘ 31536000’ |
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 创建空间。
参考资料
赞一个( 1 )
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 我可能不知道的JS
- 你可能不知道的实用Python库
- 你很可能需要知道这个调试小技巧
- 你可能不知道的小程序(上篇)
- [译] 你可能不知道的 Python 技巧
- 你可能知道事务的四大特性,但是你不一定知道事务的实现原理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective STL中文版
[美] Scott Meyers / 潘爱民、陈铭、邹开红 / 电子工业出版社 / 2013-5 / 59.00元
《Effective STL中文版:50条有效使用STL的经验》是EffectiveC++的第3卷,被评为“值得所有C++程序员阅读的C++书籍之一”。《Effective STL中文版:50条有效使用STL的经验》详细讲述了使用STL的50条指导原则,并提供了透彻的分析和深刻的实例,实用性极强,是C++程序员必备的基础书籍。C++的标准模板库(STL)是革命性的,要用好STL并不容易。《Effe......一起来看看 《Effective STL中文版》 这本书的介绍吧!