cookie使用场景

一、优缺点

缺点：1、不能跨域

                什么是跨域？指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

                举个��：主域名、端口、协议等因素

                  http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）

                  http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

                  http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

                  http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

                  http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

                  请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

           2、储存空间比较小 4KB  

           3、数量限制  每一个域名下最多建20个

           4、用户可以清除cookie  客户端还可以禁用cookie  

优点：1、访问比较方便  可通过request、cookie、header 中获取

           2、可以设置path

           3、可以设置secure属性  只能在https访问 防止XSS

           4、可以说httponly属性 服务端可以设置  js无法设置

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 创建空间。

参考资料

• MDN Set-Cookie
• MDN Document/cookie
• 聊一聊 cookie
• 深入浅出cookie
• HTTP cookies 详解
• MDN cookieEnabled