一、生命周期和存储持续性

1. Cookie

生命周期灵活:可以通过设置过期时间(`Expires`)或最大存活时间(`Max - Age`)来控制其生命周期。如果没有设置过期时间,Cookie 会在浏览器会话结束时(即关闭浏览器)自动过期。例如,用户登录状态

存储受服务器控制(部分情况):服务器可以在发送响应时设置 Cookie,也可以通过后续的请求来更新或删除 Cookie。这使得服务器能够对 Cookie 的存储和使用有较大的控制权。

2. LocalStorage

长期存储:数据存储是持久的,除非通过 JavaScript 代码显式地删除或者用户在浏览器设置中清除浏览器数据(包括本地存储)。它没有过期时间的概念,非常适合存储一些需要长期保存的用户偏好设置、本地数据等。例如,网页主题。

3. SessionStorage

会话级存储:数据的存储期限仅限于当前浏览器会话。当用户关闭浏览器窗口或者标签页时,存储在 SessionStorage 中的数据会被自动清除。例如,表单填写。

二、存储容量和数据类型限制

1. Cookie

存储容量较小:通常浏览器对 Cookie 的存储容量限制在 4KB 左右。只能用于存储少量的关键信息,例如,用户认证令牌、用户偏好的简单标识等。

数据类型主要是字符串:Cookie 只能存储字符串类型的数据。

2. LocalStorage 和 SessionStorage

存储容量较大:一般来说,现代浏览器为 LocalStorage 和 SessionStorage 提供的存储容量在几 MB 到几十 MB 之间,具体大小因浏览器而异。这使得它们可以存储更多的数据,例如,大型的用户配置数据、本地缓存的数据等。

可以存储多种数据类型(以字符串形式存储):虽然它们本质上也是以字符串的形式存储数据,但可以方便地存储和读取多种数据类型。例如,可以直接将一个 JavaScript 对象存储进去,浏览器会自动将其转换为字符串,在读取时也可以很容易地将字符串转换回原始的数据类型。

三、作用域和共享范围

1. Cookie

作用域较广:可以通过设置`Domain`和`Path`属性来控制 Cookie 的作用域。`Domain`属性指定了 Cookie 所属的域名,`Path`属性指定了在该域名下哪些路径可以访问该 Cookie。这使得 Cookie 可以在同一个域名下的不同路径甚至不同子域名之间共享。例如,一个网站的主域名(`example.com`)下的 Cookie 可以设置为在子域名(如`store.example.com`和`blog.example.com`)也能访问,方便实现单点登录等功能。

跨域限制(有条件跨域):在默认情况下,Cookie 遵循同源策略,不能在不同源(协议、域名、端口不同)的网站之间共享。但是,可以通过一些跨域设置(如 CORS-跨域资源共享)和服务器端的配置(如设置`Access-Control-Allow-Origin`等属性)来实现有限的跨域 Cookie 共享。

2. LocalStorage 和 SessionStorage

作用域限制在同源策略内:LocalStorage 和 SessionStorage 的数据只能在相同的协议、域名和端口的网页之间共享。例如,存储在`https://example.com`下的 LocalStorage 数据不能被`http://example.com`或者其他域名的网页访问。这确保了数据的安全性和隐私性,防止不同源的网页随意访问和篡改用户数据。

在浏览器标签页和窗口之间的共享情况不同:LocalStorage 的数据在同一个域名下的所有浏览器窗口和标签页之间是共享的。而 SessionStorage 的数据是每个浏览器窗口或标签页独立的,即打开多个相同网页的标签页,它们各自有独立的 SessionStorage,不会相互干扰。

更多推荐