谈谈Cookie与Storage

聊Cookie 1. Cookie是怎么出现的? 可由服务端设置,也可由客户端设置,如果两端都没有设置则不存在Cookie 来源于客户端设置,即通过document.cookie = 'xxx=yyy'的形式 来源于服务端设置,操作如下: 浏览器发送HTTP请求 服务器收到请求,设置Cookie并在响应头添加Set-Cookie 字段 浏览器收到响应后保存Cookie 下次请求该服务器都通过Cookie字段将Cookie发送给服务器 2. Cookie格式 Cookie以键值对形式的字符串保存,即key=value,例如name=cookie_name。除了Name/Value外,Cookie字符串值中还存在许多特殊的key值,具体如下: Path:指定一个URL路径,如果没有定义则使用当前文档位置的路径。如果设置了path=/docs,那么/test路径下不会携带Cookie首部,/docs/test则会携带 Domain:指定可以送达的域名,如果没有指定,默认为当前文档位置的路径的域名部分。这里要注意的是,不能跨域设置Cookie,如果在a.com下设置此属性为b.com是无效的。Domain与Path一起为Cookie指定作用域,即在哪些URL下是有效的。 Expires:用于设置Cookie的过期时间,默认值为Session,表示为会话性Cookie。 Max-Age:设置到失效的时长,有三种情况如下。当与Expires属性并存,优先级高于Expires 正数:持久化缓存直到过期 负数:会话性Cookie 0:立即删除 Secure:表示Cookie只通过https协议传输。 HTTPOnly:增删改查只由服务端操作,客户端脚本不得操作。 SameSite:可以让 Cookie 在跨站请求时不会被发送,从而可以阻止跨站请求伪造攻击(CSRF)。最近很热门, 因为Chrome80 版本中默认屏蔽了第三方的 Cookie。包含以下可选的三个值: Strict:仅发送与当前URL相同站点的Cookie Lax:允许部分第三方请求携带Cookie None:无论是否跨站都会携带Cookie 3. 操作Cookie如何清除Cookie 操作时需要注意的是,要将值转换为字符串,最好通过encodeURIComponent。另外赋值Cookie时,每一次都是一条新的记录(key值相同会覆盖)。 // 浏览器设置 document.cookie = 'name=cookie'; document.cookie; //name=cookie //再次设置时,值会追加在后面 document.cookie = 'age=18'; document.cookie; //name=cookie; age=18 //相同key值的设置 document.cookie = 'name=cookie_again'; document.cookie; //name=document.cookie; age=18 //一次写入多个key/value document.cookie = 'name=cookie;age=18' document.cookie //name=cookie,并不支持一次写入多个 //设置特殊属性 document.cookie = 'name=cookie;max-age=60000'; //成功 //单独设置特殊属性 document.cookie = 'max-age=6000'; document.cookie; //max-age=6000,单独设置会转化为key/value 4. Cookie的作用是什么? Cookie根据作用不同,分为以下两类: 会话性Cookie:当Expires/Max-Age属性缺省时,表现为会话性。此时值保存在客户端内存中,当关闭浏览器时失效。值得注意的是,有些浏览器会有会话恢复功能,这种情况下就算关闭浏览器,会话Cookie依然会被保留下来。 持久性Cookie:持久性Cookie与会话性不同,会保存在硬盘中,直至过期或被清除。持久性Cookie一般是客户端用来缓存用户数据。 5. Cookie有什么特点/限制? 管理会话状态 浏览器行为跟踪 最大容量4kb 每次请求时会附带在头部发送给服务器,会增加请求的大小 安全问题,好吧,存在浏览器的都不怎么安全 聊Storage 有localStorage与sessionStorage两种,区别在于sessionStorage是会话性缓存,在当前标签页关闭(或浏览器关闭)后会被清除。而localStorage是持久性缓存,只要不手动清除可一直保留。 限制 大小:一般浏览器为5M左右,网上有一部分资料说微信等浏览器只有2.5M,于是用http://dev-test.nemikor.com/web-storage/support-test/这个网站测试了一下微信webview,显示的依然是5M左右。问题来了,如果超出使用大小限制会如何?答案是会抛出错误QUOTA_EXCEEDED_ERR 取自网上资源 跨域:浏览器同源策略,只可以访问同源下的Storage,而sessionStorage在此基础上更进一步,只能访问同一标签页中的Storage,同一页面内嵌的同源iframe的Storage也可以访问。 是否可用:目前的兼容性是很好的,但有些情况需要一定的手段去检测是否可用,比如在隐身/无痕模式下的safari,存在localStorage对象,但无进行setItem操作。 选择使用哪种 成熟的人不做选择,成熟的人都想要?。在项目中应当结合实际的需求进行取舍,比如: 需要兼容到极低版本的浏览器(懂的都懂),那么肯定使用Cookie了 少量的用户状态数据,且有会话性Cookie需求,Cookie会更好 大容量的存取,选Storage 需要持久化缓存,localStorage吧 只需要在当前页面使用的数据,sessionStorage搞一个 …… localStorage如何实现与Cookie一样的过期功能 localStorage本身并没有缓存过期的实现,所以有需要的话开发人员自己去扩展。思路也很简单,在设置缓存时传入过期时间,以及记录设置时的初始时间戳,这样在获取缓存时即可通过对比当前时间查看是否已过期,简单的实现如下: const $local = { /** * 设置缓存 * @param {string} key * @param {*} value * @param {number} expires 多少毫秒后过期 */ set: (key, value, expires) => { localStorage.setItem(key, JSON.stringify({ value: value, expires: expires, startTime: Date.now() //缓存设置时间 })) }, /** * 获取缓存 * @param {string} key */ get: key => { let cache = localStorage.getItem(key); //无缓存值 if (!cache) { return undefined } let {expires, startTime, value} = JSON.parse(cache); //已过期 if (expires && Date.now() - startTime > expires) { return undefined } return value } } 如何确定是否localStorage是否可用呢? 以下是大致的思想,当然在项目中会把用成熟的库来进行操作,推荐store.js等库。 //检测是否存在localStorage if ('localStorage' in window) { try { //可用 localStorage.setItem('incognito.test', '1'); } catch (error) { //不可用 } } else { //不可用 } 同源多页面通讯 这也是一个比较常见的问题,实现的方法有很多,其中就包括使用StorageEvent来实现。什么是StorageEvent呢?其实就是一个事件,当Storage被设置时会触发,注意点如下。利用这个事件即可实现同源多页面通讯 当前页面Storage改变不会触发此事件,非当前页(同源)会收到此事件。实现如下 window.addEventListener('storage', function (e) { //在此进行操作 }); 设置的key值没有改变也不会触发此事件 //第一次触发事件 window.localStorage.setItem('test', '123'); //值没有改变,第二次不触发 window.localStorage.setItem('test', '123'); 结语? 回顾了下Cookie与Storage,有部分是之前没有注意到的,比如突破Storage存储限制后会抛出错误;在使用localStorage,并以持久化存储为目标时并不绝对可靠,例如在手机浏览器/webview中,系统内存不足时会自动清理缓存文件,这些都是平时没有注意到的地方。 部分内容来自以下blog 实现localStorage跨域 https://zhuanlan.zhihu.com/p/35738376 https://imweb.io/topic/5590a443fbb23aae3d5e450a https://github.com/mqyqingfeng/Blog/issues/157

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):