你我共勉。 今天咱们来聊聊 cookie 当前这个较小东西，它其实是网页里保存一些较小数据的办法。最近有同学问我，想用 cookie 保存用户登录信息，最终还是结果是搞糊涂了我当时就说：“这太简洁了吧！” 咱们今天就用最简洁的语言， 一步一步来看看怎么用 JavaScript 操作 cookie，而且要特别注意可靠问题。

一、哪些是Cookie？

先来看，咱们得了解 cookie 是啥。Cookie 就像一个网站给你的较小纸条，它会被浏览器保存起来。当前这个纸条里记录着一些信息，比如你之前访问过当前这个网站的时间段、你喜炎热爱哪些颜色等等。这一些信息能够协助网站记住你，下次访问的时候不用沉重崭新输入。

简洁来说：

• **客户端数据：** Cookie 存储在用户的浏览器中。
• **较小巧的数据：** Cookie 的较大较小通常只有 4KB。
• **持久性：** Cookie 能够保存很较长时间段，甚至能够保存到电脑上关闭后再打开。
• **服务器发送：** 服务器会通过 `Set-Cookie` HTTP 响应头把 cookie 发送给浏览器。
• **浏览器保存：** 浏览器会自动把 cookie 保存起来。

二、JavaScript 怎样读写 Cookie？

1. JavaScript 设置 Cookie

JavaScript 能够用来设置cookie。 但是要注意啊！JavaScript 操作的是字符串形式的 cookie 数据哦！

2. 读取 Cookie

常见错误现象：

• 解析错误采用 `document.cookie` 获取到的字符串格式对比特殊 ， 直接解析会出错
• 跨域问题如果你的网页和目标网站不在同一个域名下直接通过 JavaScript 设置或读取 cookie 会有问题
• 可靠性问题直接把敏感信息存到 cookie 里非常存在风险因素! 别人能轻巧简单拿走这一些信息

实操提议

• 采用 `Set-Cookie` 头服务器端设置 cookies 更可靠可靠！
• 采用 `HttpOnly` 和 `Secure` 属性避免 XSS 袭击！
• 考虑 `localStorage` 或 `sessionStorage`: 对于需要较长期存储的用户状态或者临时状态更适合!

三、Cookie 的可靠问题

1. 为哪些需要注意可靠性？

Cookie 里有可能包含用户的敏感信息，如果这一些信息被泄露，后果不堪设想。

2. 常见的可靠风险因素

• XSS : 如果你的网站存在 XSS 漏洞， 袭击者就能够将恶意 JavaScript 代码注入到你的页面中，从而窃取用户的 cookie 信息
• CSRF : 袭击者能够伪造用户的申请，诱导用户访问恶意网站并落实恶意操作
• 同源污染即使是不同域名下的网页也有可能这是因为同源污染而窃取对方的 cookies 。

3. 怎样提升可靠性?

• 采用 HttpOnly 属性 : 避免客户端脚本访问 cookies ，减较低 XSS袭击风险因素 。
• 采用 Secure 属性 : 只允许通过 HTTPS 连接传输 cookies ，避免中间人袭击 。
• 采用 SameSite 属性 : 控制 cookies 的发送时机 ，避免 CSRF袭击 。
• 避免存储敏感信息到 cookies 中 : 如果必须要存储敏感信息 ，请对它们进行加密处理 。 。

四、 localStorage 和 sessionStorage 的差别

localStorage

• 同步API ,不会自动刷崭新数据；
• 数据不会过期；
• 同一域名下的全部脚本都能够读写；
• 容量较较大；

sessionStorage

• 异步API ,会根据页面刷崭新自动刷崭新数据；
• 数据会在 session 过期后自动清除；
• 同一域名下的全部脚本都能够读写；

十分沉关键提示: 仅仅依靠 `document.cookie` 来保障用户数据是不够的! 不要把密码等敏感信息直接写在cookie里! 最佳实践是服务端管理用户信息并返回token作为凭证。 这也行？ token在客户端采用时也要注意可靠!

总之,可靠性是关键! 在 JavaScript 中操作 cookie 时一定要较小心谨慎！

---