想进大厂必看之浏览器本地存储方式

Cookie

作用与实现过程

Cookie最初是为了弥补HTTP协议的无状态特性而产生的。HTTP协议是无状态的，每次请求和响应之间不保存任何关于客户端的信息。因此，为了在多次请求之间保持客户端的状态，服务器会在响应中设置Cookie，存储一些简单的状态信息。浏览器会将这些Cookie保存在本地，当再次访问同一域名下的URL时，浏览器会自动将这些Cookie附加在请求中，服务器接收到这些Cookie后可以解析它们，获取到客户端当前的状态。

具体实现过程如下：

1. 设置Cookie：当用户访问服务器时，服务器会发送一个响应，响应中包含一个或多个Cookie，这些Cookie通过Set-Cookie头发送给浏览器。
2. 存储Cookie：浏览器接收到服务器的响应后，会将这些Cookie以键值对的形式存储在本地的Cookie对象中。Cookie通常以.txt或.html文件的形式存储，也可以通过JavaScript进行读写。
3. 发送请求时携带Cookie：当浏览器再次向服务器发送请求时，会自动将存储在本地的Cookie附加到请求头中，服务器接收到这些Cookie后，可以根据特定的键解析其值，获取客户端的状态。

缺陷与特点

• 容量缺陷：Cookie的大小限制在4KB左右，无法存储大量数据。
• 性能缺陷：Cookie的性能开销来自于其随请求的附加，无论实际是否需要。
• 安全缺陷：Cookie为纯文本传输，易被截获和篡改，存在Cookie欺骗和Cookie截获的风险。

Cookie属性与操作

• 设置与删除Cookie：

  document.cookie = "username=ziming; expires=Thu, 16 Dec 2015 12:00:00 GMT; path=/"; // 设置Cookie
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // 删除Cookie
  

Session与Cookie的对比

存储方式与原理

• Session：存储在服务器端，通过请求中的Session ID来区分不同的客户端会话。
• Cookie：存储在客户端，通过域名和路径关联，与服务器交互时随请求发送。

使用与生命周期

• Session：在用户会话期间有效，与浏览器会话结束或服务器设置的过期时间到达时失效。
• Cookie：可以通过设置过期时间持久化在客户端，直到过期或被显式删除。

容量与安全性

• Session：理论上容量不受限制，安全性相对较高，因为数据存储在服务器端。
• Cookie：容量限制为4KB，安全性较低，容易被窃取。

Web Storage API：localStorage与sessionStorage

Web Storage存储机制

Web Storage是对HTML4中Cookie存储机制的改进，更灵活且容量更大，用于解决Cookie的容量限制和安全性问题。

• localStorage：数据存储在客户端本地，持久化存储，不依赖于Cookie，大小限制为5MB。
• sessionStorage：与localStorage类似，但数据只在客户端会话期间有效，浏览器关闭后数据消失。

Web Storage API接口

• setItem(key, value)：在localStorage或sessionStorage中设置一个键值对。
• getItem(key)：返回指定键的值。
• removeItem(key)：删除指定键的值。
• clear()：删除localStorage或sessionStorage中的所有值。
• key(index)：返回指定索引的键。

应用场景

• localStorage：适合存储一些不会频繁改变且需要持久化存储的数据，如用户偏好、网站配置等。
• sessionStorage：适用于存储临时数据，如表单信息、用户浏览历史等，这些数据在浏览器关闭后自动消失。

IndexedDB

数据库存储方案

当应用程序需要处理大量数据，或者需要更复杂的数据结构和查询时，IndexedDB是一个强大的选择。它可以提供数据库级别的存储能力，但需注意其操作更为复杂。

• 优点：理论上存储量无限制，支持更复杂的数据结构和查询，适合需要持久化、复杂数据操作的应用。
• 缺点：操作较繁琐，对开发者要求较高，非关系型数据库，学习曲线较陡峭。

示例与应用场景

虽然这里没有具体代码示例，但IndexedDB的基本使用流程涉及打开数据库、创建对象仓库、执行事务和处理结果等步骤。适用于需要处理大量数据、高级查询和复杂数据模型的应用场景，如在线数据库、文档存储、交易记录等。

总结

Cookie、Session、Web Storage（localStorage和sessionStorage）以及IndexedDB为Web应用提供了多样的本地存储解决方案，每种方式都有其适用场景和限制。选择合适的本地存储机制可以根据应用的需求、数据量、安全性要求以及开发者经验来决定。