浏览器有哪些存储信息的方式 | laravel china 社区-金年会app官方网

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

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 协议》，转载必须注明作者和本文链接