设为首页 - 加入收藏 甘南站长网 (http://www.0941zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 平台 2017 2018
当前位置: 首页 > 站长学院 > MySql教程 > 正文

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

发布时间:2019-08-07 12:46 所属栏目:[MySql教程] 来源:疯狂的技术宅
导读:当 cookie 被首次引入时,它是浏览器保存数据的唯一方式。之后又有了很多新的选择:Web Storage API、IndexedDB 和 Cache API。那么 cookie 死了吗?我们来看看这些在浏览器中存储数据的技术。 Cookies Cookie 是由服务器发送或在客户端上设置的信息单位,

超越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,你的代码可能像下面这样:

  1. 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 已存在,则会被覆盖掉。

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

如果已经定义了 user_lang,它现在等于es-es。

你可以通过访问 document.cookie 值来查看所有的 cookie。这将返回一串以分号做分隔的键值对。

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

要增加键值对的可访问性,可以使用以下函数将此字符串解析为对象:

  1. const?parseCookies?=?x?=>?x??
  2. ??.split(';')??
  3. ??.map(e?=>?e.trim().split('='))??
  4. ??.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 标志,则可以执行以下操作:

  1. 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。

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

键和值都必须是字符串。如果你想保存一个对象或数组,可以在保存时调用 JSON.stringify() 并在读取时调用 JSON.parse() 来实现。

  1. const?product?=?{??
  2. ??id:?'123',??
  3. ??name:?'Coffee?Beans',??
  4. };??
  5. localStorage.setItem('cached_product',?JSON.stringify(product));??
  6. JSON.parse(localStorage.getItem('cached_product'));?

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章