浏览器有哪些存储信息的方式

浏览器提供了多种存储信息的方式，这些方式各有特点，适用于不同的场景。以下是常见的浏览器存储技术：

1. Cookie

Cookie 是最传统的存储机制，通常用于存储会话信息、用户偏好等。它们有到期时间，可以在客户端和服务器之间传递。

// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// 获取 Cookies
let cookies = document.cookie.split(';').reduce((acc, cookie) => {
  let [key, value] = cookie.split('=');
  acc[key.trim()] = value;
  return acc;
}, {});
console.log(cookies['username']);

2. Local Storage

Local Storage 是一种持久化的存储方式，可以在浏览器上存储大型数据。数据在浏览器关闭后仍旧存在，适用于存储不涉及安全性的长期数据。

// 保存数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

3. Session Storage

Session Storage 与 Local Storage 类似，但数据仅在会话期间有效，即浏览器关闭后，数据会被删除。通常用于存储页面会话期间的数据。

// 保存数据
sessionStorage.setItem('key', 'value');

// 读取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

4. IndexedDB

IndexedDB 是一个低级 API，用于客户端存储大量结构化数据。它提供了更强大的查询和事务处理功能，适合需要存储和检索大量数据的复杂应用。

// 打开数据库
let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

// 处理成功打开的数据库
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(['myStore'], 'readwrite');
  let objectStore = transaction.objectStore('myStore');
  let requestAdd = objectStore.add({ id: 1, name: 'John Doe' });
  requestAdd.onsuccess = function(event) {
    console.log('数据添加成功');
  };
};

5. Web SQL

Web SQL 是一种用于存储结构化数据的数据库 API，上面的 IndexedDB 已经替代了它的位置，但仍有一些老的浏览器支持。

// 打开数据库
let db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);

// 创建表并插入数据
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id unique, name)');
  tx.executeSql('INSERT INTO myTable (id, name) VALUES (1, "John Doe")');
  tx.executeSql('SELECT * FROM myTable', [], function(tx, results) {
    let len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i).name);
    }
  });
});

其他存储方式

• Cache Storage：用于存储网络请求的响应，适用于 PWA（渐进式 Web 应用）。
• File System API：浏览器提供的文件系统接口，用于读写本地文件。

总结比较

本作品采用《CC 协议》，转载必须注明作者和本文链接