H5时代的新存储简介

最新推荐文章于 2025-09-11 20:53:34 发布

转载最新推荐文章于 2025-09-11 20:53:34 发布 · 44 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JhoneLee/p/3611533.html

文章标签：

#数据库

本文详细介绍了WebStorage的概念、优点与使用方法，包括sessionStorage和localStorage的区别，以及它们的存储方式、方法、属性和事件。同时，文章还探讨了WebSQL的使用步骤和示例，展示了如何创建数据库、执行SQL语句以及查询数据。强调了WebStorage作为Cookie替代品的优势，并指出WebSQL的局限性。

1.WebStorage

分为：sessionStorage和localStorage两种，除了session的生命周期是在该域全部页面被关闭后就被清除而local是无限期存在外，二者的使用与方法属性事件都相同。

简介：Cookie未来的替代品。有存储量大、稳定、存取简便的优点，缺点是安全性，虽然每个域都会有它独立的Storage,但是使用跨域的手段依然能够取到非本域的Storage数据，但是在常规使用上是不存在跨域问题的。

几个方法：

setItem(key,value)存值

getItem(key) 取值

clear() 清空

key(index) 取键

removeItem(key) 删除这个值

属性：

length

事件：

至于那个onStorage事件，IE和FF支持的不怎么完善，还是等等再说

2.Web SQL

使用步骤：

a.首先打开并建立一个数据库：var db=openDatabase('dbname','2.0','我的数据库',2*1024); 四个参数：数据库名，版本号，描述，大小（单位：B）

b.然后使用数据库：db.transaction(function(dbcontrol){}); 参数只有一个回调函数而已，这个回调函数的函数体用来运行SQL，这个回调函数有一个参数，这个参数才是整个数据库使用的核心内容。

c.在这个数据库上运行自己的脚本：

var sql = openDatabase('db', '2.0', '我的数据库', 2 * 1024);
          sql.transaction(function (tx) {
              tx.executeSql('CREATE TABLE IF NOT EXISTS S_MENU(ID,NAME,SEX)');
              tx.executeSql('INSERT INTO S_MENU VALUES(?,?,?)',['002','李四','男']);
          });

分别演示了创建数据表，和插入数据，注意里面的问号，相当于占位符
executeSql有四个参数:SQL语句，[SQL语句中的参数],操作成功后执行的代码,操作失败后执行的代码

如果是查询，我们怎么才能使用到查询出的结果呢？

var sql = openDatabase('db', '2.0', '我的数据库', 2 * 1024);
          sql.transaction(function (tx) {
              tx.executeSql('SELECT * FROM S_MENU', [], function (tx, result) {
                  alert(result.rows.item(0)['NAME']);
              });

          });

这里不能使用参数，否则无法得到查询结果。
对查询结果的操作需要写在操作成功后执行的代码中，参数有两个，一个是数据库操作对象，也就是那个tx，还有一个就是得到的结果，就是result。得到结果的过程十分曲折，所以建议能用localStorage的地方就不要用web SQL了

转载于:https://www.cnblogs.com/JhoneLee/p/3611533.html