WebStorage和WebSQL

一、web Storage

早期，本地存储使用的是cookie，但是由于cookie的大小及安全性能等方面的局限性衍生出了web存储。web存储的数据并不需要像cookie那般在每次请求中都与服务器交互，它将数据存储在本地。除此之外，它还也可以大量存储数据而不影响网站性能。

客户端存储数据的两个对象为：localStorage和sessionStorage。

两者使用的API都相同，常用的有如下几个：setItem(key,value)、getItem(key)、removeItem(key)、clear()；

不管是localStorage还是sessionStorage，在使用前一半都要检查一下浏览器是否支持本地存储，一搬检查方法如下：

if(typeof(Storage)!=="undefined")

{ // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... }

else

{ // 抱歉! 不支持 web 存储。 }

 

一）、localStorage

特性：会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

操作函数：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

二）sessionStorage

特性：  会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

操作函数：

• 保存数据：sessionStorage .setItem(key,value);
• 读取数据：sessionStorage .getItem(key);
• 删除单个数据：sessionStorage .removeItem(key);
• 删除所有数据：sessionStorage .clear();
• 得到某个索引的key：sessionStorage .key(index);

三）用法举例

两者用法相同，就以localStorage为例。

if(typeof(Storage)!=="undefined")
{
	if (localStorage.clickcount)
	{
		localStorage.clickcount=Number(localStorage.clickcount)+1;
	}
	else
	{
		localStorage.clickcount=1;
        //此处也可以使用 localStorage.setItem("clickcount",1); 
        //其结果是一样的
	}
	document.getElementById("result").innerHTML=" 你已经点击了按钮 " + 
    localStorage.clickcount + " 次 ";
    //此处也可以使用 localStorage.getItem("clickcount");
}
else
{
	document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}

在Web Storage的两个对象中，我们比较常用的是localStorage，至于session的话一般就交给后台去写。但出现兼容性问题，即浏览器不支持localStorage时，可以使用cookie来进行存储数据，所以为保险起见，可以对本地存储的四个操作函数再次进行封装，当浏览器不支持localStorage时自动切换为cookie进行存储，当然还可以进一步的实现当不支持cookie时上传到服务端存储，以上做法都为保险起见。

 

二、WebSQL

webSQL是一个操作数据库的对象，里面封装了操作数据库的方法，是通过sql语句操作数据库的(创建数据库、建表、增删改查)的字符串，他不会自己执行; 在webSQL里面有执行sql语句的方法，就会去执行sql里面描述的功能; webSQL跟sql语句是完全独立的两个东西(webSQL是前端独有的API，后者只要是sqlite类型的数据库都可以使用)。

（实际上，webSQL比上面讲的两种存储方式还要强大，但是由于自由主流的浏览器才实现webSQL，而一些非主流的浏览器还不能使用webSQL，使得webSQL并没有那么流行。）

一）Web SQL本地存储的三个函数

（1）openDatabase (数据库名字, 数据库版本号, 显示名字, 数据库保存数据的大小, 回调函数（可选）)
        

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

（2）executeSql(查询字符串, 用以替换查询字符串中问号的参数, 执行成功回调函数（可选）, 执行失败回调函数（可选）)
         参数一自然是SQL语句，其中值数据可用?代替；参数二是SQL语句中?对应的值（很像PDO的预处理）。注意，                         executeSql不能单独使用，需要在事务transaction函数下使用。例子如下：

 executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)");

可使用参数替换查询字符串中问号，就以插入值为例：

tx.executeSql('INSERT INTO LOGS (name,message,time) VALUES (?, ?, ?)', [e_name, e_message,e_time]);

（3）transaction(包含事务内容的一个方法, 执行成功回调函数（可选）, 执行失败回调函数（可选）)
         事务内容为一个或多个executeSql函数构成。这个函数很难用语言表达，所以请看例子：

db.transaction(function(tx){
      tx.executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)", [], function(){ 
            alert("create ok");
      });//创建表
      tx.executeSql("SELECT * FROM MyData", [], function(){alert("select ok")});//查询
      tx.executeSql("DROP TABLE IF EXISTS MyData", [], function(){alert("drop ok")});//删除表

});

以下是查询并读取数据的例子：

db.transaction(function (tx) {
      tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
            var len = results.rows.length, i;
            msg = "<p>查询记录条数: " + len + "</p>";
            document.querySelector('#status').innerHTML +=  msg;
            for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                   //item(i)为i所对应的记录，log为表的字段名，也就是打印出表中所有log
                  document.querySelector('#status').innerHTML +=  msg;
            }
       }, null);
});