谷歌浏览器87版本更新
谷歌浏览器的最新版本在2020年末最后一天是87版本，就在这个版本中，有一个针对于cookie的API，Cookie Store，这个API代替了我们常用的document.cookie的方法，87版本开始就可以在谷歌浏览器中使用，给大家做一个简单的介绍。如果你要使用的话记得判断对应的浏览器版本，必须大于等于87版本
判断浏览器版本有很多方法，总的来说就是通过navigator用正则去做对应的匹配，在这里就不多说了
cookie方法简述
目前来看，大家在cookie方面都是统一的document.cookie，在此基础上做一些额外的操作，但是通常我们不知道的是，当你设置完成一个cookie信息之后，是否设置成功。你还需要再去获取一下你设置的那个cookie的值，看是否已经成功设置，麻烦不说，还影响我们的执行效率。而且对于正则匹配我们拿出来的所有的cookie信息这种方式很尴尬。cookie是否发生了变更，也没有对应的监听，这些都是要解决的
自然，有杠精说我存储到localStorage不就完事么？场景不一样，用的内容也不一样，如果有需要，可以复习一下localStorage和cookie的区别
获取cookie
刚才我们也提到了，目前都是统一通过document.cookie的方式获取的cookie，然后通过对应的匹配形式。为什么我们只想要name这个对应的cookie信息，但总是要先把所有的拿出来，并且还很开心的觉得自己封装了一个好的获取cookie的方法，这总是过于复杂，而且效率很低
附上一个我们平时封装的获取cookie信息的方式
代码语言：javascript复制function getCookie (name) {
let result
return (result = new RegExp('(?:^|; )' encodeURIComponent(name) '=([^;]*)').exec(document.cookie)) ? decodeURIComponent(result[1]) : null
}
那么如果我们用cookieStore的方式该怎么做呢？
新的方式的话，需要使用cookieStore并调用其get方法，它返回的是一个promise，所以，当你设置失败的时候，它会告诉你失败并返回失败原因，具体的调用实例如下
代码语言：javascript复制try {
const cookieValue = await cookieStore.get('cookieName')
if(cookieValue){
console.log('cookieName: ', cookieValue)
} else {
console.log('cookieValue is null')
}
} catch(e) {
console.error('cookieStore is error: ' e)
}
可以发现，这种方式不需要再去遍历一整遍cookie的字段了，当然也不会影响你的同步操作，毕竟这个获取方式是异步的
设置cookie
之前我们设置cookie的方式
代码语言：javascript复制document.cookie = 'cookieName=cookieValue; domain: xxx.com'
当然你可以把这种形式封装一下，会有一种更好的写法，但是写法是舒服了，本质还是一样的
就像之前说的，在设置完成之后，如果我们想知道是否设置成功，那么就需要用getCookie获取一遍，如果能够获取到，那说明没问题
那么在cookieStore中，我们如何设置呢？
代码语言：javascript复制try {
await cookieStore.set({
name: 'cookieName',
value: true,
domain: 'xxx.com',
expires: Date.now()
})
} catch (e) {
console.error('falied:' e)
}
通过上述方式就可以设置一个对应的cookie，当然，只要你不经过catch，它就是设置成功
删除cookie
之前的方式，我们通常是通过setCookie的形式将对应的cookie的值设置成空，然后将expires的值设置成过期的时间，这样依靠浏览器就会自动删除其对应的内容，这里不再列举
那么新的方式如何做呢？
代码语言：javascript复制try {
await cookieStore.delete('cookieName')
} catch (e) {
console.error('falied:' e)
}
只要没走到catch，那表明删除已经发生并且是正常的
监控cookie
当然，新的API肯定有新的方法，那就是你可以监控cookie，当cookie内容发生变化的时候会执行此操作
代码语言：javascript复制cookieStore.addEventListener('change', event => {
console.log(`${event.changed.length} changed cookies`)
for (const cookie in event.changed) {
console.log(`${cookie.name} changed`)
}
console.log(`${event.deleted.length} deleted cookies`)
for (const cookie in event.deleted) {
console.log(`${cookie.name} deleted`)
}
})
总结
针对以上，似乎chrome团队已经解决了我们的对于cookie的问题，并且这些内容在我们认为理所应当应该存在的东西，但是还是能够希望大家能够很好的去使用，有机会体验一次如果你的项目中有需求的话。
兼容性别忘记，还是要考虑一下的，但是相信，随着科技的不断发展，这些东西肯定终将不会是问题！
