推荐文章： juejin.cn/post/727594…
Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB
一、面试补充
采取什么措施来保护cookie的安全性？
-
设置Cookie 核心安全属性
-
（1）HttpOnly 属性
-
作用：防止 JavaScript 通过
document.cookie访问 Cookie，有效缓解 XSS 攻击。 -
（2）secure属性
-
作用：确保 Cookie 仅通过 HTTPS 加密通道传输，防止明文传输被窃取。
-
（3）samesite属性
-
作用：控制 Cookie 在跨站请求中的发送行为，防御 CSRF 攻击。
-
三种模式：
Strict：完全禁止跨站携带Lax：允许部分安全跨站请求（如导航链接）None：允许跨站携带（必须配合 Secure 属性）
-
（4）Domain 属性：明确指定 Cookie 生效的域名，避免泄露给子域。
-
（5）Path 属性：限制 Cookie 仅在特定路径下有效，减少暴露面。
-
（6）其他方法
- 内容安全策略（CSP）
- 通过限制资源加载来源，间接减少 XSS 风险，保护 Cookie 不被窃取。
- 服务端安全实践
- 签名验证：对 Cookie 内容进行签名，防止篡改
- 定期轮换：定期更新会话标识，缩短攻击窗口
- 敏感信息分离：不在 Cookie 中存储敏感数据，仅存储会话 ID
- 浏览器安全机制
- 同源策略：Cookie 默认遵循同源策略，提供基础隔离
- 第三方 Cookie 限制：现代浏览器逐步限制第三方 Cookie 的访问
localStroage大小，受同源策略限制吗？如果需要存储大的多得多的文件，如何实现
- 受；
- 方案：
- （1）indexdb：
- 异步操作，不阻塞主线程
- 容量大（通常为磁盘空间的50%）
- 支持事务和索引查询
- （2）Cache API（适用于PWA场景
- （3）组合策略（实际项目常用）
对于超大文件，我通常采用：
- 分片存储：将文件切分为多个chunk
- 元数据管理：记录分片信息
- 懒加载：按需加载所需分片
从cookie的角度说明如何防止csrf攻击
二、前端存储方式
- cookies： 在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦，需要自行封装；
- localStorage：HTML5加⼊的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+ ；
- sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式；
- Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐；
- IndexedDB： 是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。
三、细说存储方式/区别
1、cookie：
- Cookie一旦创建成功，名称就无法修改
- 生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
- 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
- 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的
- Cookie在请求一个新的页面的时候都会被发送过去，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。
2、localstorage：
- HTML5新引入的特性
- 大小一般为5MB
- 持久储存，除非主动清理，不然会永久存在
- 仅储存在本地，不像Cookie那样每次HTTP请求都会被携带
- 受到同源策略限制
- 浏览器设置为隐私模式，那我们将无法读取到LocalStorage
- 存在浏览器兼容问题，IE8以下版本的浏览器不支持
3、SessionStorage（限制更加严格）
- HTML5提出（同localstorage）
- 临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后会删除这些数据。
- 本地进行数据存储（同localstorage）
- SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能够共享；
- Local Storage 与 Session Storage 都属于 Web Storage，都不能被爬虫爬取
- 能够存储 5M 或者更大的数据
4、indexdb
- IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限
- 键值对储存：IndexedDB 内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。
- 异步：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
- IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
- 支持二进制储存：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
其他：token为什么设置到期时间
