浏览器：七种数据存储方式 你用过几种？

先有问题再有答案

  1. 浏览器有哪些数据存储方式
  2. 设计这些存储方式的目的是什么
  3. 这些存储方式有什么特点
  4. 有什么差异点？
  5. 分别适合用于哪些场景？

存储方式

 

其实可以将存储方式分为三类：

状态存储：
用于保存临时状态信息，适合在当前会话或短期内存储数据。
例如 window对象内存存储, url存储, SessionStorage

数据存储：
用于持久化存储数据，适合需要跨会话的数据持久化。
例如 cookie, localStorage, indexedDB

请求存储：
用于缓存 HTTP 请求和响应，提升应用的性能和离线能力。
例如: Cache Storage

内存存储

JavaScript 变量和对象存储在 window 对象中，生命周期是页面的生命周期。
特性：生命周期短，适用于临时数据存储，在页面刷新后数据丢失。

window.tempData = 'Temporary Data'; 
console.log(window.tempData); // 输出 'Temporary Data'

URL存储

URL上的数据存储，可以说是一种临时存储方式，但在整个会话或页面生命周期内是持久的，不会因页面刷新而丢失。

URL 状态的存储是通过 URL参数 或 URL 路径部分来实现的，常用于在客户端应用程序之间传递信息，特别是在实现无状态请求和响应时。

优点

  1. 持久性和共享：URL 中的数据可以通过复制和分享 URL 来存储和传递，适合需要分享状态的应用情境。
  2. 无状态性：不需要在服务器上保留用户状态，所有状态信息都存储在 URL 中，简化了服务器端的设计。
  3. 易于调试：URL 中的数据对开发人员完全可见，可方便地用于调试和监控。

缺点

  1. 数据长度限制：URL 长度通常有浏览器和服务器限制（一般为 2000-8000 字符）。
  2. 安全性问题：URL 中的数据对用户完全可见，可能会泄露敏感数据，传递敏感信息需特别注意安全措施。
  3. 易编辑：用户可以手动编辑 URL 中的数据，这可能会引发安全和一致性问题。
const params = new URLSearchParams(window.location.search);
const page = params.get('page');
console.log(page); // 输出 URL 中的 'page' 参数值

// 设置和读取片段标识符
window.location.hash = '#profile';
console.log(window.location.hash); // 输出 '#profile'

SessionStorage

SessionStorage 是 HTML5 提供的一种客户端存储机制，旨在满足在一个浏览器会话（如一个标签页或窗口）期间存储数据的需求。其设计目的是提供一种容易使用、轻量级且安全的方式来存储和管理 会话范围内的临时数据。

详情参考：浏览器: SessionStorage可以跨标签共享嘛？

cookie存储

cookie是一种存储方式，它一般用于存储 用户身份信息。
Cookie是由服务端设置在浏览器上的
Cookie是由浏览器管理的并且随着http请求自动发送的。
Cookie在服务端配置允许的前提下 可以使用js访问操作cookie。

详情参考：浏览器: cookie机制完全解析

Local Storage

提供了一种在浏览器中持久化存储数据的方法，数据直到明确删除前一直保留。

  • 持久性：localStorage 的数据也是持久的，在浏览器会话和页面刷新之间保留，直到明确删除。
  • 存储对象：localStorage 存储的是字符串，可以通过 JSON 序列化和反序列化来存储复杂对象。
  • 适用场景：适用于对数据有限制直接访问的场景（如用户设置、短期内需要访问的数据）。
  • 手动管理生命周期：localStorage 中的数据需要通过 JavaScript API 进行手动管理和删除。如果不进行清理，数据将持续存在。
  • 存储限制：一般 localStorage 的存储限制为 5-10MB 不等，具体取决于浏览器。
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
console.log(theme); // 输出 'dark'

indexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

面向对象的数据库，用于在客户端存储大量结构化数据，支持索引、事务等功能。

适合存储复杂数据和大量数据，浏览器实现的存储上限相对较高。

const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myStore', { keyPath: 'id', autoIncrement: true });
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myStore'], 'readwrite');
  const store = transaction.objectStore('myStore');
  store.add({ id: 1, name: 'John Doe' });
};

说句实话 我还重来没在实际项目中 使用过这个数据库....

Cache Storage

Cache Storage API 是一种在客户端 缓存网络请求和响应 的机制，允许开发者管理缓存内容，提高网站的性能和离线访问能力。通常与ServiceWorker一起使用，当然也可以在主线程中通过js访问。

  • 持久性：Cache Storage 中的数据是持久的，会在浏览器会话和页面刷新之间保留，除非明确删除。

  • 存储对象：Cache Storage 主要用于存储请求和响应对象（也就是可以缓存整个 HTTP 请求和响应）。

  • 适用场景：通常用于 PWA（Progressive Web Apps）和带有离线支持的应用，管理站点的静态资源缓存，提高离线环境和性能。

  • 手动管理生命周期：Cache Storage 中的缓存项需要通过 Cache API 进行手动管理。开发者需要有意的添加、读取和删除缓存。如果不进行清理，缓存将持续存在。

  • 存储限制：虽然大部分浏览器没有明确限制，但通常 Cache Storage 的存储空间比 localStorage 更大，可以存储大量数据。浏览器可能在存储非常多的数据时进行清理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cache Storage API Example</title>
</head>
<body>
  <h1>Cache Storage API Example</h1>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const cacheName = 'example-cache';
      
      // 打开缓存并添加资源
      caches.open(cacheName).then(cache => {
        return cache.addAll(['/demo.html', '/style.css', '/script.js']);
      }).then(() => {
        console.log('Resources added to cache');
      }).catch(error => {
        console.error('Failed to add resources to cache', error);
      });
      
      // 从缓存中读取资源
      caches.match('/demo.html').then(response => {
        if (response) {
          return response.text();
        } else {
          console.log('Resource not found in cache');
          return fetch('/demo.html').then(response => response.text());
        }
      }).then(data => {
        console.log('Content:', data);
      }).catch(error => {
        console.error('Failed to fetch resource', error);
      });

      // 删除资源
      caches.open(cacheName).then(cache => {
        return cache.delete('/style.css');
      }).then(success => {
        if (success) {
          console.log('Resource deleted from cache');
        } else {
          console.log('Resource not found in cache');
        }
      }).catch(error => {
        console.error('Failed to delete resource', error);
      });

      // 列出所有缓存名称
      caches.keys().then(cacheNames => {
        console.log('Cache names:', cacheNames);
      }).catch(error => {
        console.error('Failed to list cache names', error);
      });

      // 列出指定缓存中的所有请求
      caches.open(cacheName).then(cache => {
        return cache.keys();
      }).then(requests => {
        console.log('Requests in cache:', requests);
      }).catch(error => {
        console.error('Failed to list requests in cache', error);
      });
    });
  </script>
</body>
</html>

 

相关文章

  1. 浏览器: SessionStorage可以跨标签共享嘛？
  2. 浏览器: cookie机制完全解析
  3. mdn_CacheStorage
posted @ 2025-08-05 09:32  蓦然JL  阅读(120)  评论(0)    收藏  举报
MENU
访问主页
关注我
关注微博
私信我
返回顶部