【转】你可能不知道的cookie

本文详细介绍了Cookie的基本概念、特性及其应用场景。包括Cookie的存储限制、安全性设置、自动携带机制及如何通过JavaScript进行操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家都了解的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的属性

属性
说明
示例
namecookie的key值‘id=sdbsdabsdsa;’
expires到期时间‘expires=21 Oct 2015 07:28:00 GMT
domaincookie生效的域‘domain=im.baidu.com;’
pathcookie生效的路径‘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值.

 1     var cookie = {
 2         getCookie: function (key) {
 3             return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
 4         },
 5 
 6         setCookie: function (opts) {
 7             if (Object.prototype.toString.call(opts) !== "[object Object]") {
 8                 return;
 9             }
10             if (!opts.key) {
11                 return;
12             }
13             if (!opts.value) {
14                 opts.value = '';
15             }
16             var tmp = opts.key + '=' + encodeURIComponent(opts.value) + ';';
17             if (opts.expires) {
18                 tmp += 'expires=' + new Date(new Date().getTime() + opts.expires * 1000).toGMTString() + ';';
19             }
20             if (opts.path) {
21                 tmp += ('path=' + opts.path + ';');
22             }
23 
24             if (opts.domain) {
25                 tmp += ('domain=' + opts.domain + ';');
26             }
27 
28             if (opts.secure) {
29                 tmp += 'secure'
30             }
31             document.cookie = tmp;
32         },
33 
34         delCookie: function (opts) {
35             cookie.setCookie({
36                 key: opts.key,
37                 value: '',
38                 expired: -1000000000,
39                 path: opts.path,
40                 domain: opts.domain,
41             })
42         },
43     }

其他

判断是否启用cookie

使用navigator.cookieEnabled可以判断用户是否启用cookie

if (!navigator.cookieEnabled) {
  // 让用户知道,开启网页中的cookies是很有必要的.
}

  

是否可以直接修改header中的cookie字段?

Ajax请求可以设置header,但是某些header字段无法设置,比如refercookie等.

cookie自动删除

cookie 会被浏览器自动删除,通常存在以下几种原因:

  • 会话 cooke (Session cookie) 在会话结束时(浏览器关闭)会被删除
  • 持久化 cookie(Persistent cookie)在到达失效日期时会被删除
  • 如果浏览器中的 cookie 数量达到限制,那么 cookie 会被删除以为新建的 cookie 创建空间。

 

转载于:https://www.cnblogs.com/xudajuanzi/p/6993507.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值