H5的web本地存储怎么使用

H5的web本地存储，指的是在浏览器上使用JavaScript存储数据，可以在用户关闭浏览器后仍然保持数据的存储，并且可以跨越不同的浏览器窗口、标签和会话。本地存储的常用方式有两种：LocalStorage和SessionStorage。两者都是以键值对的形式保存数据，区别在于数据的生命周期和作用域。

一、LocalStorage

LocalStorage是在HTML5中新引入的本地数据存储方式，它可以将数据以键值对（key-value）的形式存储在用户浏览器中，并可以跨浏览器会话、标签页和窗口使用，存储的数据是区域性的（针对某个特定的源）。LocalStorage是基于选项卡的（即是基于浏览器的），并且它不会过期，当用户关闭浏览器之后，存储的数据仍然可以被保留。

LocalStorage的使用方法如下：

1.存储数据

使用LocalStorage存储数据需要通过setItem()方法实现，如下所示：

localStorage.setItem(key,value);

其中，key为字符串类型的键名，value可以是任何JavaScript值（字符串、数字、布尔值、数组和对象等）。

2.读取数据

通过getItem()方法可以读取LocalStorage中的数据，如下所示：

localStorage.getItem(key);

其中，key为要读取的键名。

3.删除数据

使用removeItem()方法可以删除LocalStorage中的数据，如下所示：

localStorage.removeItem(key);

其中，key为要删除的键名。

二、SessionStorage

SessionStorage也是本地数据存储方式，它的数据和LocalStorage的数据的区别在于数据的生命周期和作用域。SessionStorage是基于会话的（即是基于浏览器窗口的），并且它在会话结束之后将被自动删除。SessionStorage的作用域仅限于打开它的那个标签页或窗口。

SessionStorage的使用方法如下：

1.存储数据

使用SessionStorage存储数据需要通过setItem()方法实现，如下所示：

sessionStorage.setItem(key,value);

其中，key为字符串类型的键名，value可以是任何JavaScript值（字符串、数字，布尔值，数组和对象等）。

2.读取数据

通过getItem()方法可以读取SessionStorage中的数据，如下所示：

sessionStorage.getItem(key);

其中，key为要读取的键名。

3.删除数据

使用removeItem()方法可以删除SessionStorage中的数据，如下所示：

sessionStorage.removeItem(key);

其中，key为要删除的键名。

三、Web SQL数据库

除了LocalStorage和SessionStorage外，HTML5还提供了使用Web SQL数据库的本地存储方式。Web SQL数据库是使用SQL语言操作的关系型数据库，它的数据存储方式和操作方法与传统的关系型数据库类似，使用方式基本上与LocalStorage和SessionStorage相似。Web SQL数据库能够在本地存储和管理大量的数据，并可以在不联网的情况下进行数据访问和修改。

使用Web SQL数据库的主要程序步骤如下：

1. 创建数据库

使用openDatabase()方法创建数据库，如下所示：

var db = openDatabase(数据库名, 版本号, 描述, 数据库大小);

其中，数据库名为需要创建的数据库名称，版本号为指定的数据库版本号（整数类型），描述为对数据库的简单描述，数据库大小为指定的最大存储容量（字节为单位）。

2. 创建数据表

使用executeSql()方法创建数据表，如下所示：

db.executeSql('CREATE TABLE IF NOT EXISTS 表名 (字段名 字段类型)');

其中，如果表已经存在，则不需要重新创建；如果不存在，则新建一个表。

3. 插入数据

使用executeSql()方法插入数据，如下所示：

db.executeSql('INSERT INTO 表名 (字段名1,字段名2,字段名3) VALUES (值1,值2,值3)');

其中，VALUES后面可以是具体的值，也可以是插入是通过一个数组动态获得的值，如：

db.executeSql('INSERT INTO 表名 (字段名1,字段名2,字段名3) VALUES (?,?,?)',[val1,val2,val3]);

4. 查询数据

使用executeSql()方法查询数据，如下所示：

db.executeSql('SELECT * FROM 表名', [], function(tx, results) {
    for (var i = 0; i < results.rows.length; i++) {
        console.log(results.rows.item(i));
    }
},null);

其中，[]为需要查询的参数列表，tx参数为事务对象（用于实现对数据库的操作），结果通过回调函数返回。在回调函数中，通过循环遍历查询结果的rows数组，使用item()方法获取每一条记录的数据。

5. 更新数据

使用executeSql()方法更新数据，如下所示：

db.executeSql('UPDATE 表名 SET 字段1 = 值1,字段2 = 值2,字段3 = 值3 WHERE 条件');

其中，WHERE后面是更新的条件。

6. 删除数据

使用executeSql()方法删除数据，如下所示：

db.executeSql('DELETE FROM 表名 WHERE 条件');

其中，WHERE后面是删除的条件。

Web SQL数据库作为HTML5的基础设施，可以在浏览器中轻松存储和管理数据，从而使Web应用程序的体验更加流畅、响应更加迅速。