H5如何操作本地存储和本地数据库

一、 本地存储使用localStorage localStorage 是 HTML5 提供的本地存储技术，可以用来将数据保存在浏览器中，而不是向服务器发送请求。

下面是 localStorage 的基本使用方法：

// 存储数据
localStorage.setItem("key", "value");
// 读取数据
var value = localStorage.getItem("key");
// 删除数据
localStorage.removeItem("key");

需要注意的是，localStorage 只能存储字符串类型的数据。如果要存储对象类型的数据，需要将其转换为字符串类型，再进行存储。

// 存储对象
var obj = {name: "Jack", age: 20};
localStorage.setItem("key", JSON.stringify(obj));
// 读取对象
var objStr = localStorage.getItem("key");
var obj = JSON.parse(objStr);

二、 本地数据库使用IndexedDB IndexedDB 是 HTML5 提供的本地数据库技术，可以用来将数据存储在浏览器中，并以数据库的形式进行管理。IndexedDB 的使用需要先打开数据库，并创建对象存储空间，然后通过事务进行增删改查等操作。

下面是 IndexedDB 的基本使用方法：

// 打开数据库
var request = indexedDB.open("myDB", 1);
// 监听打开数据库的成功事件
request.onsuccess = function(event) {
    var db = event.target.result;
    // 创建对象存储空间
    var objectStore = db.createObjectStore("myObjectStore", {keyPath: "id"});
};
// 监听打开数据库的失败事件
request.onerror = function(event) {
    console.log("打开数据库失败！");
};

IndexedDB 支持复杂的查询操作，需要使用索引来提高查询效率。下面是一个使用索引进行范围查询的示例：

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");
var index = objectStore.index("name");
var request = index.openCursor(IDBKeyRange.bound("A", "Z"));
request.onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
        console.log(cursor.value);
        cursor.continue();
    }
};

三、 本地存储与本地数据库的区别和应用场景 本地存储和本地数据库都是用来在浏览器中存储数据的技术，但两者有一些明显的区别。 本地存储通常用于存储较小的数据，比如一些用户配置信息、输入框内容等，它的优点是使用简单，速度快，适用于简单数据的存储。而本地数据库则适用于需要存储大量数据、并且需要复杂查询的场景，比如一些管理系统、web应用等。 四、 总结 本地存储和本地数据库是HTML5提供的两种本地存储技术，分别适用于不同的场景。localStorage适用于存储简单的、较小的数据，IndexedDB适用于存储大量数据和需要复杂查询的场景。在实际使用中，应根据实际需求选择适合的技术。