跳转至

浏览器cookie

在浏览器中,存储机制和隐私增强功能各有不同的应用场景、生命周期和存储容量。下面介绍了 Microsoft Edge 以及其他现代浏览器中常见的存储类型和隐私功能,包括本地存储、会话存储、IndexedDB、专用状态令牌和兴趣组。

1. **本地存储(Local Storage)

  • 定义:本地存储是一种基于浏览器的存储机制,用于存储键值对,数据会保存在用户浏览器中,甚至关闭浏览器也不会删除。
  • 生命周期:除非用户手动清除缓存或数据,或使用代码删除数据,否则本地存储的数据会一直保留。
  • 存储容量:通常为每域 5MB 到 10MB。
  • 使用场景:适合存储一些长期存在的数据,如用户偏好设置、用户主题、语言选择等。可以在页面刷新后继续保持存储的数据。
  • API
1
2
3
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');

2. 会话存储(Session Storage)

  • 定义:会话存储类似于本地存储,但其生命周期仅限于单个浏览器标签页或窗口。页面关闭后会自动清除数据。
  • 生命周期:数据仅在当前会话有效,关闭标签页或窗口后数据被删除。
  • 存储容量:通常与本地存储类似,为每域 5MB 到 10MB。
  • 使用场景:适用于需要在当前页面生命周期中临时存储的数据,比如页面导航的状态、表单信息等。
  • API
1
2
3
sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');
sessionStorage.removeItem('key');

3. IndexedDB

  • 定义:IndexedDB 是一个低级 API,用于在用户浏览器中存储大量结构化数据。它是一个 NoSQL 数据库,允许存储大量复杂的数据对象,如文件、图片、JSON 等。
  • 生命周期:与本地存储类似,数据会一直存在,除非手动删除或浏览器清理缓存。
  • 存储容量:不同浏览器对 IndexedDB 的存储容量有不同限制,通常可以存储数百 MB 或更多。
  • 使用场景:适合用于存储大量数据,或需要处理复杂查询和离线支持的 Web 应用,比如进阶的 Web 应用(PWA)、离线存储和缓存数据。
  • API(简化版)
1
2
3
4
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
};

4. **专用状态令牌(Privacy Sandbox Private State Tokens)

  • 定义:专用状态令牌是 Google 的隐私沙盒(Privacy Sandbox)的一部分,旨在替代第三方 cookie,保护用户隐私,同时保持广告功能。这种令牌允许验证用户的设备状态或身份,而不暴露用户的个人数据。
  • 生命周期:专用状态令牌在广告或相关服务使用时短期有效,通常设计为保护用户隐私,所以生命周期不固定,受限于应用场景。
  • 存储容量:这些令牌通常不涉及大量数据存储。
  • 使用场景:主要用于广告投放场景,用于验证用户设备合法性或减少广告欺诈,但不追踪用户的个人浏览历史。

5. **兴趣组(FLoC & Topics API)

  • 定义:兴趣组是 Google 隐私沙盒中的另一部分,用于将用户划分到某些兴趣类别中(如运动爱好者、科技爱好者等),从而为用户提供个性化的广告,而无需使用第三方 cookie。FLoC(联邦学习联盟群体)是早期的提案,但后来被 Topics API 取代。
  • 生命周期:兴趣组信息通常会在一段时间后更新,用户的兴趣类别会动态变化,通常每隔一段时间更新。
  • 存储容量:涉及到用户兴趣类别的少量元数据,存储容量较小。
  • 使用场景:用于个性化广告的展示,避免使用第三方 cookie 追踪用户个人信息。

存储类型对比

存储类型 生命周期 存储容量 使用场景
本地存储(Local Storage) 持久(手动清除或代码删除) 5-10MB 用户偏好设置、持久数据、简化缓存机制
会话存储(Session Storage) 当前会话有效,关闭后删除 5-10MB 会话期间的临时数据,比如表单、状态信息
IndexedDB 持久(手动清除或代码删除) 数百 MB 以上 大量数据存储,PWA、离线数据存储
专用状态令牌(Private State Tokens) 短期 很小 验证用户设备合法性、广告场景
兴趣组(FLoC/Topics API) 动态更新 很小 广告个性化服务,替代第三方 Cookie

使用场景:

  • 本地存储:用于存储不需要频繁更新的数据,如用户的主题偏好、语言设置等。
  • 会话存储:适合临时性数据存储,如表单数据、页面之间的中间状态,或者在会话期间使用的数据。
  • IndexedDB:用于存储复杂结构的大量数据,适用于 PWA 应用、离线存储等。
  • 专用状态令牌:用于广告中的隐私保护,防止广告欺诈,同时提供设备合法性验证。
  • 兴趣组:用于个性化广告展示,增强广告的相关性,同时减少对用户隐私的侵害。

这些存储和隐私功能使开发者能够在尊重用户隐私的前提下构建高效、数据驱动的 Web 应用。

当然,这里是缓存存储、存储桶和 Cookie 的详细说明,包括它们的生命周期、存储容量和使用场景:

1. **缓存存储(Cache Storage)

  • 定义:缓存存储是一种由 Service Worker 提供的存储机制,允许 Web 应用将请求和响应缓存到浏览器中。这对于实现离线功能和提高加载性能非常有用。
  • 生命周期:数据通常会在浏览器关闭或 Service Worker 被卸载时保留,除非手动清除或通过代码删除缓存。
  • 存储容量:不同浏览器对缓存存储的容量有不同限制,但通常允许存储数十 MB 到几百 MB 的数据。
  • 使用场景:缓存静态资源(如 HTML、CSS、JS 文件、图片等),以便在离线时或重新访问时更快地加载内容。
  • API
javascript复制代码// 添加到缓存
caches.open('my-cache').then(cache => {
  cache.add('/path/to/resource');
});

// 从缓存中获取
caches.match('/path/to/resource').then(response => {
  if (response) {
    return response;
  }
});

2. **存储桶(Storage Bucket)

  • 定义:存储桶是用于组织和存储数据的容器,常见于云存储服务中,如 Google Cloud Storage、Amazon S3 等。在 Web 开发中,这些通常用于存储大文件或数据集合,并提供访问和管理功能。
  • 生命周期:数据保留时间通常由用户或应用程序控制,存储桶中的数据可以根据需求手动删除或自动清理。
  • 存储容量:容量几乎无限制,取决于所使用的云存储服务的配额和费用。
  • 使用场景:用于存储大型文件(如视频、图像、备份文件等),通常与服务器端代码结合使用以管理和提供这些文件。
  • API(示例,Google Cloud Storage)

  • 定义:Cookie 是浏览器与服务器之间用来存储少量数据的机制。Cookie 可以存储键值对,并在每次请求时发送回服务器。
  • 生命周期

  • 会话 Cookie:仅在浏览器会话期间有效,浏览器关闭后删除。
  • 持久 Cookie:具有到期日期,直到到期日期或手动删除前保持有效。
  • 存储容量:每个 Cookie 的大小通常为 4KB,每个域名通常能存储约 50-100 个 Cookie。
  • 使用场景:用于存储用户会话信息、跟踪用户活动、实现用户认证和个性化设置。
  • API
1
2
3
4
5
6
from google.cloud import storage

client = storage.Client()
bucket = client.get_bucket('my-bucket')
blob = bucket.blob('path/to/file')
blob.upload_from_filename('local-file.txt')

存储类型对比

存储类型 生命周期 存储容量 使用场景
缓存存储(Cache Storage) 持久(除非手动清除或卸载 Service Worker) 数十 MB 到几百 MB 离线功能、提高加载性能、缓存静态资源
存储桶(Storage Bucket) 手动删除或自动清理 几乎无限 存储大型文件、备份、云存储
Cookie 会话或持久(基于到期日期) 4KB/个 Cookie 用户会话管理、跟踪用户活动、认证信息

总结

  • 缓存存储 适用于需要缓存请求和响应的离线或高性能应用。
  • 存储桶 主要用于存储和管理大型文件,通常与云存储服务结合使用。
  • Cookie 用于存储少量的用户数据,如会话信息和跟踪数据,虽然它们的容量和生命周期较有限。

这些不同的存储机制提供了多样化的解决方案来满足 Web 开发中不同的数据存储和管理需求。