返回

探寻存储之道：Cookie 与 Storage

前端

当互联网仍在襁褓之中，面临的挑战之一就是如何在客户端和服务器之间保持状态。在web早期，网页是独立存在的，每次请求都是新的开始，没有办法跟踪用户在网站上的行为。

1994年，Netscape公司开发了Mosaic浏览器，并在其中引入了Cookie机制。Cookie本质上是服务器发送到用户浏览器并保存在浏览器中的小块数据。Cookie可以包含各种信息，如用户名、密码、语言偏好等。当用户再次访问同一个网站时，浏览器会将Cookie发送回服务器，服务器可以根据Cookie中的信息识别用户并提供个性化服务。

Cookie的引入解决了客户端和服务器之间状态跟踪的问题，但它也带来了一些安全隐患。因为Cookie是明文存储在浏览器中，所以可以被恶意网站窃取并用于欺诈活动。为了解决这些问题，Cookie的规范进行了多次修订，引入了各种安全机制，如SameSite、Secure、HttpOnly等。

随着Web技术的发展，HTML5 Storage应运而生。HTML5 Storage是一种客户端存储机制，它允许web应用程序将数据存储在浏览器中。HTML5 Storage分为两种类型：sessionStorage和localStorage。

sessionStorage是一种临时存储机制，它只在浏览器会话期间存在。一旦浏览器窗口关闭，sessionStorage中的数据就会被清除。localStorage是一种持久存储机制，它可以跨浏览器会话保存数据。即使浏览器窗口关闭，localStorage中的数据也不会被清除。

HTML5 Storage的优点是它比Cookie更安全，因为数据不会被发送到服务器。此外，HTML5 Storage的容量也比Cookie大得多，它可以存储数兆字节的数据。

Cookie和HTML5 Storage是两种不同的存储机制，它们各有优缺点。在实际应用中，可以根据不同的需求选择合适的存储机制。

Cookie 格式

Cookie以键值对形式的字符串保存，即key=value，例如name=cookie_name。除了Name/Value外，Cookie字符串值中还存在许多特殊的key值，具体如下：

  • Path：指定一个路径，用于限制Cookie的适用范围。当浏览器请求的资源位于此路径或其子路径下时，浏览器会将Cookie发送给服务器。
  • Domain：指定一个域名，用于限制Cookie的适用范围。当浏览器请求的资源位于此域名或其子域名下时，浏览器会将Cookie发送给服务器。
  • Expires：指定Cookie的过期时间。当Cookie过期时，浏览器会将其从存储中删除。
  • SameSite：指定Cookie是否可以在跨域请求中发送。SameSite有三种值：Lax、Strict和None。Lax允许Cookie在跨域请求中发送，但只有在请求是安全的(HTTPS)的情况下。Strict不允许Cookie在跨域请求中发送。None允许Cookie在跨域请求中发送，无论请求是否安全。
  • Secure：指定Cookie是否只在HTTPS连接中发送。当Secure属性设置为true时，Cookie只能在HTTPS连接中发送。
  • HttpOnly：指定Cookie是否只能被HTTP协议访问。当HttpOnly属性设置为true时，Cookie无法通过客户端脚本(如JavaScript)访问。

Cookie 存储

Cookie保存在浏览器的存储中。不同的浏览器有不同的存储机制。在Chrome浏览器中，Cookie保存在Cookies.sqlite数据库中。在Firefox浏览器中，Cookie保存在cookies.sqlite数据库中。在Safari浏览器中，Cookie保存在cookies.db数据库中。

HTML5 Storage

HTML5 Storage是一种客户端存储机制，它允许web应用程序将数据存储在浏览器中。HTML5 Storage分为两种类型：sessionStorage和localStorage。

sessionStorage是一种临时存储机制，它只在浏览器会话期间存在。一旦浏览器窗口关闭，sessionStorage中的数据就会被清除。

localStorage是一种持久存储机制，它可以跨浏览器会话保存数据。即使浏览器窗口关闭，localStorage中的数据也不会被清除。

HTML5 Storage的数据存储在浏览器的存储中。不同的浏览器有不同的存储机制。在Chrome浏览器中，HTML5 Storage的数据保存在IndexedDB数据库中。在Firefox浏览器中，HTML5 Storage的数据保存在Web SQL数据库中。在Safari浏览器中，HTML5 Storage的数据保存在LocalStorage数据库中。

Local Storage 中的数据存储

LocalStorage是一种持久存储机制，它可以跨浏览器会话保存数据。即使浏览器窗口关闭，localStorage中的数据也不会被清除。

LocalStorage中的数据以键值对的形式存储。每个键都是一个字符串，每个值也是一个字符串。

可以使用以下方法来存储和检索LocalStorage中的数据：

  • localStorage.setItem(key, value)：将数据存储到LocalStorage中。
  • localStorage.getItem(key)：从LocalStorage中检索数据。
  • localStorage.removeItem(key)：从LocalStorage中删除数据。
  • localStorage.clear()：清空LocalStorage中的所有数据。

LocalStorage可以存储的数据量很大，理论上可以存储数兆字节的数据。然而，实际存储量可能会受到浏览器的限制。

LocalStorage是一种非常有用的存储机制，它可以被用来存储各种数据，如用户设置、表单数据、游戏数据等。