HTML5 Web 存储学习笔记

什么是 Web 存储？

Web 存储指的是在浏览器中存储数据的技术，通过它可以在用户离线时保持应用程序状态。HTML5 提供了三种 Web 存储方式：Web Storage、Web SQL Database 和 IndexedDB。

Web Storage

Web Storage 是一种简单的键值存储机制，可以用来存储字符串类型的数据。它分为两种：localStorage 和 sessionStorage。

localStorage

localStorage 可以用来永久保存数据，即使用户关闭了浏览器或者关机也可以保持数据不变。以下是一个 localStorage 的实例：

javascriptCopy Code
// 将数据存储到 localStorage 中
localStorage.setItem('name', 'binjie09');

// 从 localStorage 中获取数据
const name = localStorage.getItem('name');
console.log(name); // 输出 binjie09

sessionStorage

sessionStorage 则只能在当前会话期间（session）保存数据，当用户关闭浏览器或者标签页时，数据就会被清空。以下是一个 sessionStorage 的实例：

javascriptCopy Code
// 将数据存储到 sessionStorage 中
sessionStorage.setItem('age', '18');

// 从 sessionStorage 中获取数据
const age = sessionStorage.getItem('age');
console.log(age); // 输出 18

Web SQL Database

Web SQL Database 是一种基于 SQL 的数据库技术，它允许在用户的浏览器中创建和管理数据库。以下是一个 Web SQL Database 的实例：

javascriptCopy Code
// 打开或创建一个数据库
const db = openDatabase('mydb', '1.0', 'mydb', 1024 * 1024);

// 创建表
db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id, name)');
});

// 插入数据
db.transaction(tx => {
  tx.executeSql('INSERT INTO users (id, name) VALUES (?, ?)', [1, 'binjie09']);
});

// 查询数据
db.transaction(tx => {
  tx.executeSql('SELECT * FROM users', [], (tx, result) => {
    for (let i = 0; i < result.rows.length; i++) {
      console.log(result.rows.item(i));
    }
  });
});

IndexedDB

IndexedDB 是一种 NoSQL 数据库技术，它使用对象存储来存储数据。以下是一个 IndexedDB 的实例：

javascriptCopy Code
// 打开或创建一个数据库
const request = indexedDB.open('mydb', 1);

// 创建一个对象存储空间
request.onupgradeneeded = event => {
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};

// 插入数据
request.onsuccess = event => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  const user = { id: 1, name: 'binjie09' };
  store.put(user);
};

// 查询数据
request.onsuccess = event => {
  const db = event.target.result;
  const tx = db.transaction(['users'], 'readonly');
  const store = tx.objectStore('users');
  const request = store.get(1);
  request.onsuccess = event => {
    const user = event.target.result;
    console.log(user);
  };
};

以上就是 HTML5 Web 存储的几种方式，根据实际需求选择不同的方式来存储数据。