js存储cookie

浏览器里存点东西，存储最土的存储办法就是cookie。它就是存储个文本小纸条，服务器塞给你，存储你揣兜里，存储下次再去人家门口，存储掏出来给人看一眼。存储别嫌它老，存储HTTP协议本来就是存储个没记性的家伙，每次请求都当你是存储陌生人，cookie算是存储硬给它装了个临时记忆。

写cookie的存储代码简单得有点无聊。直接操作document.cookie就行，存储比如：

document.cookie = "username=张三; path=/; max-age=3600";

这一行干了三件事：存了个键值对，存储限定路径是存储整个站点，设定一小时有效期。注意，这里没有分号结尾的语法糖，你每次赋值，它不会覆盖别的cookie，只是追加或者更新同名的那个。你要是连着写两行不同名字的cookie，最后document.cookie读出来是个分号分隔的长字符串，有点像超市小票。

麻烦就在读取上。document.cookie不是对象，不是数组，就是个字符串。想拿某个值，你得自己split，自己遍历，自己解码。我见过不少新手在这儿栽跟头——直接拿indexOf去查，结果把"username"和"username2"搞混。别偷懒，写个解析函数，几行的事，但能省掉你半夜调试的血压。

删cookie更反直觉。没有专门的remove方法，你得把过期时间设成过去的时间点。比如：

document.cookie = "username=; path=/; max-age=0";

max-age为0或者负数，浏览器立马撕掉这张纸条。你要是忘了带path=/，那就有意思了——你在/page1设置的cookie，在/page2根本看不见，你以为删掉了，其实它躲在别的路径底下好好活着。

真正要命的是HttpOnly这个属性。如果你用JavaScript操作cookie，那这个属性基本跟你无关——它专门防你这种脚本去读cookie。服务端设置的HttpOnly cookie，document.cookie里压根不显示。这是XSS攻击的防线，但反过来也说明，纯前端存敏感信息，cookie不是个好容器。

还有SameSite。以前大家不关心，后来Chrome默认把它设成Lax，跨站请求就不带cookie了。你要是做第三方嵌入的iframe，或者前端调跨域接口，不设置SameSite=None; Secure，cookie就静默失踪。排查半天，最后发现是浏览器策略，那种感觉，像是被门卫拦了，证件齐全但就是不让进。

个人看法：cookie适合存会话标识、用户偏好这类低敏感度的东西。存token？勉强可以，但得配短过期时间。存密码？那是给自己挖坑。localStorage容量更大，但XSS一打就全裸奔。cookie至少有个HttpOnly的选项能挡一下脚本读取，算是矮子里拔将军。

最后提醒一句，cookie的4KB大小限制是硬性的。超了，浏览器静默丢弃，不报错。你存个大字符串进去，下次读出来发现被截断，那感觉就像写日记写到一半，纸被撕了，你还不知道哪一页出了问题。

写cookie不难，难的是搞清楚它在你整个站点架构里扮演什么角色。别拿它当数据库使，它就是一张便利贴——记性不好，容易丢，但随手贴随手撕，确实方便。