前话
cookie，曲奇饼。将黄油、中筋面粉、鸡蛋液搅拌后冷藏30分钟，取出擀至任意形状后放入180度烤箱20分钟左右即可。好了，今天的文章就到这里了。
粉丝大大们想看的是这个吗？你怕是年终奖不想要了。（伟大的老板）
再给我个机会吧，您看这个。（卑微的小编）
Cookie是什么？
要明白Cookie是什么，我觉得要先知道ta解决了什么问题。将时间拨回到2000年。随着互联网的不断普及，用户对网页的要求不再满足于单方面的浏览。更复杂，更丰富的网页内容和交互被用户所需要。此时，用户状态的留存（用户追踪）成为了当时最大的技术壁垒。
用户追踪指代记录用户在网页所做过的事情。如用户登录、商品加入购物车等。
以现在的技术广度来看，用户追踪的方式很多。Cookie（我是今天的主角），Session，WebStorage (LocalStorage、SessionStorage)等。但是在当时的技术环境下，这一切都是空白的。WebStorage更是在2009年才第一次在W3C上被提及。
经过IETF（互联网工程任务组）组织的讨论，决定定义两种不同的方式来解决用户追踪的问题。一种是保存在客户端（浏览器等）的方式，即Cookie。另一种是保存在服务器端的方式，即Session。其中Session虽然被存储在服务器端，但是仍需要SessionId的帮助来确定每一次请求对应的用户状态，而SessionId又常常存放在Cookie中，这种绕地球一圈的解决方式确实在安全性上要强于Cookie（要盗取SessionId就要先破解Cookie）。但是同时也给服务器存储带来了压力，甚至在集群应用中需要额外的同步流程来统一管理。导致在当前的技术环境下已经很少被应用了。而Cookie其简单丰富的Api，服务器零存储，无视集群等优点使其一直活跃至今。
好了，言归正传，到底什么是Cookie呢。
Cookie是保存在浏览器document对象下的一段有规则字符串。由一系列键值对组成。为了解决http请求无状态的问题，会在每一次http请求时在请求头自动添加Cookie。这样服务器就可以通过读取Cookie来判断客户端的状态了。
格式：<cookie-name>=<cookie-value>;<cookie-name>=<cookie-value>
示例：uid=013b6070c74eb20428e6be;code=xqCFUY7_r8EVc8XToEiSE5MXs7-mus4eT7qBFXTJXZI
Cookie怎么操作
相信粉丝大大们已经知道什么是Cookie了，那么要怎么操作呢。请听小编娓娓道来~
鲁迅说过：观其形而后习其增删改，事半然功倍矣。查看Cookie的方式很多，小编按段位介绍给大大们。
以下所有浏览器窗口示例基于 Microsoft Edge 86.0.622.38版本
黄金段位
1、打开转转官网：www.zhuanzhuan.com
2、点击左上角小锁标志，可以看到Cookie（xx个正在使用中）。小编这里是18个哦。
3、点击Cookie栏可查看详情
铂金段位
1、打开转转官网：www.zhuanzhuan.com
2、右键打开菜单后，点击检查或输入Ctrl + Shift + I，打开开发者工具。
3、在开发者工具中查看Cookie
钻石段位
1、打开开发者工具控制台，输入document.cookie查看。
星耀段位
1、打开系统文件夹（windows C:\Users\[yourUserName]\AppData\Local\Microsoft\Edge\User Data\Default）
2、使用sqlite数据库管理工具打开，没安装sqlite的可以使用https://sqliteonline.com网站体验下哦。
王者段位
小编不知道的黑科技还请各位粉丝大大们在评论区分享哦，祝各位季季上王者。【可怜脸】
既然已经可以观其形，那么增删改其实就很简单了。前面所介绍的所有查看方法都有相关的界面交互可以进行操作。而作为一个负责任的小编，怎么可能就这么草率呢。
操作Cookie
服务器端
在响应头中增加Set-Cookie选项，浏览器接收到响应头后会自动保存Cookie。
格式：Set-Cookie: <cookie名>=<cookie值>
示例：
浏览器端
小编整理了一套适用于ES6的Cookie操作方法，地址 ( blog.csdn.net/fsferg/arti… )。
参照MDN的 document.cookie ( developer.mozilla.org/zh-CN/docs/… )。
不是小编不想说，篇幅所限，篇幅所限。[狡黠脸]
Cookie的应用实例
Cookie相比Session更符合业务场景也更方便实用。各大互联网企业都对其有高强度的依赖。
通常用来在用户登录后种一个用户唯一的token来标志用户已登录，也可使用这种方式来判断用户是否登录过期或设置登录时效。
还可以用来临时保存用户的购物车等信息。下面小编通过一个京东购物车的例子来说明。
1、打开苏宁官网：www.suning.com
2、搜索任意商品，小编这里搜的是华为matebook x。这时可以看到商品列表和购物车数量为0。
3、选择任意商品进入详情后加入购物车，可以看到我的购物车已增加为1。
4、这是打开开发者工具，查看cookie，找到totalProdQty发现其值为1
5、右键打开菜单后点击编辑"值"后，修改其值为5，刷新页面后发现。购物车已经变为5了
6、鼠标移入购物车打开详情后，数字自动刷新回了1。这点苏宁做的还是很好的。不完全信任cookie值。
Cookie的优缺点
优点
BOM丰富的api使其具有高扩展性- 存储在浏览器端，减少了服务器存储的压力
- 遵循同源策略，可设置域名和路径对数据进行隔离
- 可通过SSL传输，降低了请求被破解的可能性
- 可设置Cookie失效时间，防止Cookie永久保留在浏览器端引起的资源浪费和数据过期
缺点
- 每次请求都会携带Cookie，对带宽资源有一定浪费
- 虽然传输过程安全，但是可通过浏览器端轻易修改数据，敏感数据不建议使用Cookie或加密后使用
- Cookie只能存储字符串类型数据，对媒体数据无能为力
- 不同浏览器对Cookie的大小限制不同，通常在4KB，因此Cookie只能存储简短的内容
- 用户可手动关闭Cookie，这样使得Cookie不是稳定的存储方式
好了，这期的分享就到这里，喜欢的大大们可以点下喜欢哦，嘿嘿。更重要的是大大们想了解什么前端技术请踊跃在评论区留言。我们会一一认真考虑的哦。
