HTML5本地存储

HTML5提供了一个本地存储的API，可以在客户端的浏览器中保存数据。这些数据以键/值对的形式保存，可以通过JavaScript进行访问。

以下是一些使用HTML5本地存储的方法：

1. 使用localStorage存储数据

// 存储数据
localStorage.setItem("key", "value");
 
// 获取数据
var data = localStorage.getItem("key");
 
// 删除数据
localStorage.removeItem("key");
 
// 清除所有数据
localStorage.clear();

2. 使用sessionStorage存储数据

sessionStorage与localStorage类似，不同之处在于sessionStorage的存储数据只在当前会话期间有效，关闭页面后即被清除。

// 存储数据
sessionStorage.setItem("key", "value");
 
// 获取数据
var data = sessionStorage.getItem("key");
 
// 删除数据
sessionStorage.removeItem("key");
 
// 清除所有数据
sessionStorage.clear();

3. 使用indexedDB进行更复杂的存储

indexedDB是一个运行在浏览器上的非关系型数据库，它可以存储大量数据，提供查询接口，允许数据有序、高效的存储和访问。

// 打开或创建数据库
var request = window.indexedDB.open("databaseName", version);
 
// 数据库创建或版本改变时的回调函数
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    // 创建或更新object store
};
 
// 数据库打开成功的回调函数
request.onsuccess = function(event) {
    var db = event.target.result;
    // 打开数据库成功后的操作
};
 
// 数据库打开失败的回调函数
request.onerror = function(event) {
    // 处理错误
};
 
// 使用事务操作object store
var transaction = db.transaction(["objectStoreName"], "readwrite");
var objectStore = transaction.objectStore("objectStoreName");
 
// 添加数据
objectStore.add(value);
 
// 读取数据
objectStore.get(key);
 
// 删除数据
objectStore.delete(key);
 
// 更新数据
objectStore.put(value);
 
// 创建索引
objectStore.createIndex("indexName", "propertyName", { unique: false });
 
// 使用索引查询
var request = objectStore.index("indexName").get(value);

以上就是HTML5本地存储的一些基本用法。