聊一聊常见的浏览器数据存储方案( 四 ) _数据存储

② Path此属性指定访问 cookie 必须存在的请求 URL 中的路径。除了将 cookie 限制到域之外，还可以通过路径来限制它。路径属性为 Path=/store 的 cookie 只能在路径 /store 及其子路径 /store/cart、/store/gadgets 等上访问。
③ Expires/Max-size该属性用来设置 cookie 的过期时间。若设置其值为一个时间，那么当到达此时间后，cookie 就会失效。不设置的话默认值是 Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页) 后，cookie 就会失效。
除此之外，它还可以通过将过期日期设置为过去来删除 cookie 。
④ Secure具有 Secure 属性的 cookie 仅可以通过安全的 HTTPS 协议发送到服务器，而不会通过 HTTP 协议。这有助于通过使 cookie 无法通过不安全的连接访问来防止中间人攻击。除非网站实用不安全的 HTTP 连接，否则应该始终将此属性与所有 cookie 一起使用。
⑤ HTTPOnly此属性使 cookie 只能通过服务端访问。因此，只有服务断可以通过响应头设置它们，然后浏览器会将它们与每个后续请求的头一起发送到服务器，并且它们将无法通过客户端 JavaScript 访问。
这可以在一定程度上帮助保护带有敏感信息（如身份验证 token）的 cookie 免受 XSS 攻击，因为任何客户端脚本都无法读取 cookie 。但这并不意味着可以完全免受 XSS 攻击。因为，如果攻击者可以在网站上执行第三方脚本，那可能无法访问 cookie，相反，他们可以直接向服务端执行相关的 API 请求。因此，想象一下用户访问了一个页面，黑客在网站上注入了恶意脚本。他们可以使用该脚本执行任何 API，并在他们不知道的情况下代表用户执行操作。
（4）Cookie 工具库① Js Cookie（JavaScript）Js Cookie 是一个简单、轻量级的 JavaScript API，用于处理浏览器 cookie 。其支持 AMD、CommonJS 和 ES 模块、没有依赖关系、经过彻底测试、支持自定义编码和解码、通用浏览器支持。
安装：
npm i js-cookie使用：
// 设置 CookieCookies.set('cookie-name', 'cookie-value', { expires: 14})// 读取 CookieCookies.get('cookie-name')// 删除 CookieCookies.remove('cookie-name')② React Cookie（React）React Cookie 是一个专门用于 React 的 cookie 库，它继承了 Universal Cookie 库的功能。它提供了一组组件和 Hooks，使 React 中的 cookie 处理非常简单。如果使用的是 React 16.8+ 版本，就可以使用 hooks 来处理 cookie 。否则，必须使用其提供的组件。
安装：
npm i react-cookieReact Cookie 提供了 3 个 Hook，分别是 cookie、setCookie 和 removeCookie 。可以使用这些 Hook 来处理 React 应用中的 cookie 。
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);// 设置 CookiesetCookie(name, value, [options]);// 删除 CookieremoveCookie(name, [options])③ Cookies（Node.js）Cookies 是用于 HTTP cookie 配置的流行 NodeJS 模块之一。可以轻松地将其与内置的 NodeJS HTTP 库集成或将其用作 Express 中间件。它允许使用 Keygrip 对 cookie 进行签名以防止篡改、支持延迟 cookie 验证、不允许通过不安全的套接字发送安全 cookie、允许其他库在不知道签名机制的情况下访问 cookie 。
安装：
npm install cookies使用：
const cookie = require('cookie');cookies = new Cookies( request, response, [ options ] )// 读取 cookiescookies.get( name, [ options ] )// 设置 cookiescookies.set( name, [ value ], [ options ] )4. IndexedDB（1）概述IndexedDB 提供了一个类似 NoSQL 的 key/value 数据库，它可以存储大量结构化数据，甚至是文件和 blob 。每个域至少有 1GB 的可用空间，并且最多可以达到剩余磁盘空间的 60% 。
IndexedDB 于 2011 年首次实现，并于 2015 年 1 月成为 W3C 标准，它具有良好的浏览器支持：

文章插图

key/value 数据库意味着存储的所有数据都必须分配给一个 key 。它将key 与 value 相关联，key 用作该值的唯一标识符，这意味着可以使用该 key 跟踪该值。如果应用需要不断获取数据，key/value 数据库使用非常高效且紧凑的索引结构来快速可靠地通过 key 定位值。使用该 key，不仅可以检索存储的值，还可以删除、更新和替换该值。