【浏览器】浏览器本地存储

浏览器本地存储

相关文章

浏览器本地存储

一、LocalStorage

特点：LocalStorage 是浏览器提供的一种持久化存储方案，数据存储在浏览器的本地文件中，即使关闭浏览器也能保持数据不丢失。
容量：通常每个域名的 LocalStorage 容量为 5MB 左右。
用途：适用于存储较小量的数据，例如用户偏好设置、登录凭据等。
安全：受到同源策略（Same Origin Policy）的限制。

二、SessionStorage

特点：SessionStorage 也是浏览器提供的一种本地存储方案，与 LocalStorage 类似，但数据在会话结束（关闭浏览器标签页）后会被清除。
容量：SessionStorage 的容量也通常为 5MB 左右。
用途：适用于存储临时性的数据，例如表单数据、临时状态等。
安全：受到同源策略（Same Origin Policy）的限制。

三、IndexedDB

特点：IndexedDB 是一种功能强大的客户端存储数据库，可以存储大量结构化数据，并提供了丰富的查询和索引功能。
容量：IndexedDB 的容量通常比 LocalStorage 和 SessionStorage 大得多，但具体容量限制因浏览器而异。
用途：适用于需要存储大量数据、复杂数据结构或者需要进行高级查询和索引的场景。
安全：受到同源策略（Same Origin Policy）的限制。

使用案例

这个示例演示了如何使用 IndexedDB 来创建一个名为 myDatabase 的数据库，并在其中创建一个名为 customers 的对象存储空间。然后，进行了数据的添加、查询、更新和删除操作。最后，通过事务的 oncomplete 事件来关闭数据库连接。

// 打开或创建名为 "myDatabase"、版本号为 1 的 IndexedDB 数据库
const request = indexedDB.open('myDatabase', 1);

// 数据库打开成功时的回调函数
request.onsuccess = function(event) {
  // 获取数据库对象
  const db = event.target.result;
  
  // 开启一个读写事务，访问名为 "customers" 的对象存储空间
  const transaction = db.transaction(['customers'], 'readwrite');
  // 获取名为 "customers" 的对象存储空间
  const objectStore = transaction.objectStore('customers');
  
  // 向对象存储空间添加数据
  objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' });

  // 获取数据
  const getRequest = objectStore.get(1);
  // 获取数据成功时的回调函数
  getRequest.onsuccess = function(event) {
    const customer = event.target.result;
    console.log('Customer:', customer);
  };

  // 更新数据
  const updateRequest = objectStore.put({ id: 1, name: 'Jane Doe', email: 'jane@example.com' });
  // 更新数据成功时的回调函数
  updateRequest.onsuccess = function(event) {
    console.log('Data updated successfully');
  };

  // 删除数据
  const deleteRequest = objectStore.delete(1);
  // 删除数据成功时的回调函数
  deleteRequest.onsuccess = function(event) {
    console.log('Data deleted successfully');
  };

  // 事务完成时的回调函数，关闭数据库连接
  transaction.oncomplete = function(event) {
    db.close();
  };
};

// 数据库首次创建或版本更新时的回调函数
request.onupgradeneeded = function(event) {
  // 获取数据库对象
  const db = event.target.result;
  
  // 创建一个名为 "customers" 的对象存储空间，并指定 "id" 字段为主键
  const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
  
  // 为对象存储空间创建索引
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
};