hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

近期在项目中进行hybrid app开发，项目中有大量的js代码执行在android设备上。

使用到了非常多HTML5的新特性，之前没有遇到过，不了解。这里记录下添加点前端的知识。混合式app开发中。常常须要使用缓存功能，比方你在页面表单控件上输入了数据。你希望下次退出app再次进来的时候还能看到这些数据；比方你的项目中有保存草稿的功能，仅仅是先将数据暂时存储在本地，以后再提及到server。

这就须要我们将数据持久地存储在本地。这就须要用到HTML5中的本地化存储解决方式。本文主要介绍下sessionStorage、localStorage和websql
database这3种存储方案。

sessionStorage和localStorage这2种方案，api的使用方式一模一样。很easy，详细的使用能够參考"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使用起来也非常easy：

<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一样。也是依照域进行区分的，一个域不能訪问还有一个域下的数据库。

巴特西

hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

最新文章

热门文章