超越Cookie：当今的客户端数据存储技术

当 cookie 被初次引入时，它是赏识器生涯数据的独一方法。之后又有了许多新的选择：Web Storage API、IndexedDB 和 Cache API。那么 cookie 死了吗？我们来看看这些在赏识器中存储数据的技能。

Cookies

Cookie 是由处事器发送或在客户端上配置的信息单元，生涯在用户的当地赏识器上。它们会自动附加到每个哀求上。因为 HTTP 是无状态协议，因此 cookie 应承将信息存储在客户端上，以便将其他上下文数据传给该处事器。

Cookie 有一些符号，对付进步数据的安详性很是有效。 HttpOnly 符号阻止用 JavaScript 会见 cookie 的举动，只有附加在 HTTP 哀求上时才气会见它们。这很是得当防备通过 XSS（跨站点剧本）进攻造成数据泄漏。

另外，Secure 符号确保仅在通过 HTTPS 协议发送哀求时才发送 cookie。 SameSite 符号，可以配置为 lax 或 strict（它们的差别看这里），可用于辅佐防备 CSRF（跨站点哀求伪造）哀求。它汇报赏识器只有在哀求是与哀求者在统一域中的 URL 时才发送 cookie。

什么时辰行使 cookies？

那么，在哪些环境下你但愿得到 Cookie？最常见的应用场景之一是授权 token 。因为 HttpOnly 符号为 XSS 进攻添加了特另外掩护层，SameSite 可以防备 CSRF，而 Secure 可以确保你的 cookie 被加密，这使你的身份验证token 有特另外掩护层。

因为 auth token 很是小，因此你无需担忧哀求过大。另外因为它们会自动附加到每个哀求，因此行使 cookie 可以在处事器上确定用户是否颠末身份验证。这对付处事器泛起的内容很是有效，譬喻你但愿将未颠末身份验证的用户重定向到登录页面。

Cookie 的另一个用途是存储用户的说话代码。因为你也许但愿在大大都哀求中会见用户的说话，因此你可以操作它自动附加。

怎样行使 cookies？

前面经接头了要行使 cookie 的缘故起因，此刻来看看你可以怎样行使 cookie。要从处事器上给客户端配置 cookie，必要在 HTTP 相应中添加 Set-Cookie 标头。 Cookie 应回收 key=value 的名目。假如你要在 Node.js 措施中配置 cookie，你的代码也许像下面这样：

response.setHeader('Set-Cookie', ['user_lang=en-us', 'user_theme=dark_mode']); 

这将会配置两个 cookie：它将 user_lang 配置为 en-us，将 user_theme 配置为 dark_mode。

Cookie 也可以由客户端哄骗。要配置 cookie，可以用 key=value 的名目为 document.cookie 赋值。假如 key 已存在，则会被包围掉。

document.cookie = 'user_lang=es-es'; 

假如已经界说了 user_lang，它此刻便是es-es。

你可以通过会见 document.cookie 值来查察全部的 cookie。这将返回一串以分号做脱离的键值对。

document.cookie = 'user_lang=en-us';  
document.cookie = 'user_theme=light_mode';  
console.log(document.cookie); // 'user_lang=en-us; user_theme=light_mode;' 

要增进键值对的可会见性，可以行使以下函数将此字符串理会为工具：

const parseCookies = x => x  
  .split(';')  
  .map(e => e.trim().split('='))  
  .reduce((obj, [key, value]) => ({...obj, [key]: value}), {}); 

If you need to set one of the flags onto your cookie, you can add them after a semicolon. For example, if you’d like to set the Secure and SameSite flags onto your cookie, you would do the following:

假如你必要将个中一个符号配置到 cookie 上，可以在分号后添加它们。譬喻你想在 Cookie 上配置 Secure 和 SameSite 符号，则可以执行以下操纵：

document.cookie = 'product_ids=123,321;secure;samesite=lax' 

因为 HTTPOnly 的浸染是使 cookie 只能在处事器上会见，因此它只能由处事器添加。

除了这些安详符号之外，你还可以配置 Max-Age（ cookie 应该生涯的秒数）或 Expires（Cookie应该逾期的日期）。假如这些都未配置，则 cookie 将跟从赏识器会话的一连时刻。假如用户行使隐身模式，则会在用户会话封锁时删除 Cookie。

因为处理赏罚 cookie 的接口不是很友爱，以是你可以行使诸如 js-cookie 之类的库来利便对其的操纵。

Web Storage API

Web Storage API 是一种在当地存储数据的新选项。它在 HTML5 中中添加，Web Storage API 包罗localStorage 和 sessionStorage。固然 cookie 凡是处理赏罚 server/client 通讯，但 Web Storage API 最合用于生涯客户端数据。

我们已经将 cookie 作为在当地存储数据的选项，为什么还必要 Web 存储？个中一个缘故起因是：因为 cookie 会自动添加到每个 HTTP 哀求中，因此哀求巨细会变得痴肥。以是你可以用 Web Storage API 存储比 cookie 更大量的数据。

另一个利益是更直观的 API。假如行使 cookie，你必要手动理会 cookie 字符串来会见各个键。 Web Storage 使这越发轻易。假如要配置或获取值，可以行使 setItem 或 getItem。

localStorage.setItem('selected_tab', 'FAQ');  
localSTorage.getItem('selected_tab'); // 'FAQ' 

键和值都必需是字符串。假如你想生涯一个工具或数组，可以在生涯时挪用 JSON.stringify() 并在读取时挪用 JSON.parse() 来实现。

const product = {  
  id: '123',  
  name: 'Coffee Beans',  
};  
localStorage.setItem('cached_product', JSON.stringify(product));  
JSON.parse(localStorage.getItem('cached_product')); 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!