最近在项目中进行hybrid app开发，项目中有大量的js代码运行在android设备上。使用到了很多HTML5的新特性，之前没有遇到过，不了解，这里记录下增加点前端的知识。混合式app开发中，经
最近在项目中进行hybrid app开发，项目中有大量的js代码运行在android设备上。使用到了很多HTML5的新特性，之前没有遇到过，不了解，这里记录下增加点前端的知识。混合式app开发中，经常需要使用缓存功能，比如你在页面表单控件上输入了数据，你希望下次退出app再次进来的时候还能看到这些数据；比如你的项目中有保存草稿的功能，只是先将数据临时存储在本地，以后再提及到服务器。这就需要我们将数据持久地存储在本地，这就需要用到HTML5中的本地化存储解决方案。本文主要介绍下sessionStorage、localStorage和websql database这3种存储方案。
sessionStorage和localStorage这2种方案，api的使用方式一模一样，非常简单，具体的使用可以参考"HTML5 LocalStorage本地存储"这篇文章。sessionStorage和localStorage的区别如下：
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当浏览器窗口关闭时，sessionStorage中的数据就会被清除。 而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。可以看到localStorage比起古老的cookie技术有很多优势，但是同样localStorage也存在安全问题。关于本地存储的安全问题，可以参考"HTML5本地存储localstorage安全分析"这篇文章
值得注意的是：sessionStorage和localStorage都是按照跨域进行区分的。
http://localhost:8080/demo/1.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var localStorage = window.localStorage;
localStorage.setItem("data_in_local",8080);
var sessionStorage = window.sessionStorage;
sessionStorage.setItem("data_in_session","session");
</script>
</head>
<body>
<div data-role="page" id="indexPage">
page in localhost:8080
</div>
</body>
</html>
http://localhost:9090/demo/9090.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var localStorage = window.localStorage;
var port = localStorage.getItem("tomcat_port");
alert(port);
</script>
</head>
<body>
<div data-role="page" id="indexPage">
page in localhost:9090
</div>
</body>
</html>
那么在localhost:9090这个域下面并不能访问localhost:8080域下本地存储的数据。下图可以看到localhost:9090这个域下没有本地缓存的数据。
localStorage只能存储简单格式数据就是key-value这种数据格式，而websql存储方案则提供了类似于关系数据库的表，能够以sql语句的形式操作数据库。websql使用起来也很简单：
<script type="text/javascript">
var db = window.openDatabase("CacheDB", "1.0", "Cache Database", 10 * 1024*1024);
db.transaction(function (tx) {
var sql = 'CREATE TABLE IF NOT EXISTS t_app_cache (key text primary key, value text)';
tx.executeSql(sql);
});
db.transaction(function (tx) {
tx.executeSql('INSERT INTO t_app_cache (key, value) VALUES ("1", "a1")');
tx.executeSql('INSERT INTO t_app_cache (key, value) VALUES ("2", "a2")');
});
</script>
可以阅读"Web SQL Database规范"获取更多API的使用细节等。可以阅读"基于HTML5中的Web SQL Database来构建应用程序"这篇文章入门，了解websql是如何使用的。最后提一下：websql和localStorage一样，也是按照域进行区分的，一个域不能访问另一个域下的数据库。