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