HTML5 中有哪些不同类型的存储？

在 HTML5 中，提供了许多不同类型的存储方式，以便开发人员更好地管理和存储数据。下面介绍其中几种常用的存储方式：

1. Local Storage

Local Storage 是一种可以用来存储小量数据的浏览器本地存储方式。它允许我们将键值对存储在客户端，使得数据在不同的页面和会话之间持久化存在。我们可以使用 JavaScript 的 localStorage 对象来访问 Local Storage。

以下是 Local Storage 常用的方法：

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

// 获取数据
localStorage.getItem('key');

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

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

2. Session Storage

Session Storage 与 Local Storage 的能力和使用方法非常相似，但是它的生命周期仅限于当前会话。当用户关闭浏览器窗口或者标签页后，Session Storage 中的数据将会被销毁。

以下是 Session Storage 常用的方法：

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

// 获取数据
sessionStorage.getItem('key');

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

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

3. IndexedDB

IndexedDB 是一种 JavaScript 数据库，可以用来存储大量结构化数据。IndexedDB 允许我们存储、检索和查询数据，并支持事务操作。我们可以使用 IndexedDB API 访问 IndexedDB 数据库。

以下是 IndexedDB 常用的方法：

// 打开数据库
var request = indexedDB.open('database_name', 'database_version');

// 新建数据存储对象
var objectStore = db.createObjectStore('store_name', { keyPath: 'id' });

// 插入数据
objectStore.put({ id: 1, name: 'John' });

// 根据主键检索数据
var request = objectStore.get(1);

// 查询数据
var request = objectStore.openCursor();

// 删除数据
objectStore.delete(1);

4. Web SQL

Web SQL 是一种浏览器端的 SQL 数据库，它基于 SQLite 数据库。Web SQL 允许我们使用 SQL 语句进行数据的存储、检索和查询，提供了非常便捷的方式来管理数据。

以下是 Web SQL 常用的方法：

// 打开数据库
var db = openDatabase('database_name', 'database_version', 'database_description', 5 * 1024 * 1024);

// 执行 SQL 语句
db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS table_name (id INT PRIMARY KEY, name VARCHAR(20))');
    tx.executeSql('INSERT INTO table_name (id, name) VALUES (?, ?)', [1, 'John']);
    tx.executeSql('SELECT * FROM table_name', [], function(tx, result) {
        console.log(result.rows);
    });
});

总结：

以上介绍了 HTML5 中常见的四种存储方式，分别是 Local Storage、Session Storage、IndexedDB 和 Web SQL。开发人员可以根据实际需要选择合适的存储方式，为应用程序提供更好的数据管理和存储体验。