【浏览器】前端存储的方式

1. Cookies

• 概述：Cookies 是最早的前端存储方式，用于在客户端和服务器之间生存少量数据。它们通常用于用户会话、身份验证等场景。
  
• 存储容量：每个 Cookie 大小限制为 4KB 左右。
  
• 有效期：可以设置逾期时间，默认情况下 Cookie 会话结束后即失效（即关闭浏览器后）。
  
• 作用域：可以通过 domain 和 path 限定 Cookie 的作用范围。
  
• 安全性：可以通过 HttpOnly（无法被 JavaScript 访问）和 Secure（仅在 HTTPS 连接下传输）进步安全性。
  
• 应用场景：用于存储会话信息、跟踪用户行为、存储认证状态等。
  

1. document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

复制代码

2. LocalStorage

• 概述：LocalStorage 是 HTML5 引入的存储方式，答应在浏览器端生存较大的键值对数据，且数据不会随页面刷新或关闭而清除。
  
• 存储容量：通常为 5MB（不同浏览器有所不同）。
  
• 有效期：数据长期生存，除非被手动清除或浏览器清空缓存。
  
• 作用域：同源计谋（Same Origin Policy），即数据仅在同一域名下可访问。
  
• 安全性：容易被 JavaScript 访问，因此要避免存储敏感数据（如暗码）。
  
• 应用场景：得当存储长期化的用户设置、表单数据缓存、应用状态等。
  

1. // 存储数据
2. localStorage.setItem("username", "JohnDoe");
4. // 获取数据
5. const username = localStorage.getItem("username");
7. // 删除数据
8. localStorage.removeItem("username");
10. // 清空所有数据
11. localStorage.clear();

复制代码

3. SessionStorage

• 概述：SessionStorage 和 LocalStorage 类似，但它的数据仅在页面会话期间有效，关闭浏览器或标签页后数据会被清除。
  
• 存储容量：通常为 5MB 左右。
  
• 有效期：数据在同一会话期间（即浏览器或标签页打开时）可用，页面关闭后清除。
  
• 作用域：同源计谋，但仅限当前标签页或窗口。
  
• 应用场景：用于存储会话级别的数据，如临时状态、单次登录信息等。
  

1. // 存储数据
2. sessionStorage.setItem("sessionID", "12345");
4. // 获取数据
5. const sessionID = sessionStorage.getItem("sessionID");
7. // 删除数据
8. sessionStorage.removeItem("sessionID");
10. // 清空所有数据
11. sessionStorage.clear();

复制代码

4. IndexedDB

• 概述：IndexedDB 是浏览器提供的一个低级 API，用于存储大量布局化数据。它是一个 NoSQL 数据库，可以存储更复杂的对象，且支持索引和事件。
  
• 存储容量：可以存储比 LocalStorage 更大（上百 MB 甚至 GB 级）的数据。
  
• 有效期：长期存储，除非手动删除或浏览器清空缓存。
  
• 作用域：同源计谋。
  
• 应用场景：得当存储大量数据，如离线存储、PWA 数据缓存、客户端搜索索引等。
  

1. // 打开/创建数据库
2. const request = indexedDB.open("myDatabase", 1);
4. request.onupgradeneeded = function(event) {
5.     const db = event.target.result;
6.     const objectStore = db.createObjectStore("users", { keyPath: "id" });
7.     objectStore.createIndex("name", "name", { unique: false });
8. };
10. request.onsuccess = function(event) {
11.     const db = event.target.result;
12.     const transaction = db.transaction(["users"], "readwrite");
13.     const objectStore = transaction.objectStore("users");
15.     // 添加数据
16.     const addUserRequest = objectStore.add({ id: 1, name: "JohnDoe" });
17. };

复制代码

5. Service Worker 缓存

• 概述：Service Worker 是用于构建渐进式 Web 应用（PWA）的 API。它可以拦截网络请求、缓存静态资源，并实现离线访问。
  
• 存储容量：取决于浏览器和装备，通常容量较大。
  
• 有效期：数据可以根据必要长期化，直到手动清除或缓存计谋更新。
  
• 应用场景：得当离线应用场景、PWA、缓存静态资源、实现快速响应和减少网络请求。
  

1. self.addEventListener('install', (event) => {
2.     event.waitUntil(
3.         caches.open('my-cache').then((cache) => {
4.             return cache.addAll([
5.                 '/',
6.                 '/styles.css',
7.                 '/script.js',
8.             ]);
9.         })
10.     );
11. });
13. self.addEventListener('fetch', (event) => {
14.     event.respondWith(
15.         caches.match(event.request).then((response) => {
16.             return response || fetch(event.request);
17.         })
18.     );
19. });

复制代码

---

选择存储方式时的思量因素：

• 数据大小：对于少量数据，可以使用 LocalStorage 或 SessionStorage；假如是大规模数据，则得当 IndexedDB 或 Service Worker 缓存。
  
• 数据有效期：假如数据必要在会话结束后长期生存，可以使用 LocalStorage；假如是临时数据，使用 SessionStorage。
  
• 访问控制和安全性：敏感数据应避免存储在 Cookie 或 LocalStorage，避免安全风险。
  
• 复杂性：对于简单的键值对，LocalStorage 充足；对于复杂的对象存储或索引查询，使用 IndexedDB 更合适。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。