一、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);
});
