近期在项目中进行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的更多相关文章

  1. html5新特性localStorage和sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法: localStorage: (1)它的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失. (2)它的容量大小是5M作用 ...

  2. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  3. 【Hybrid App】Hybrid App开发实战

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员, 技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越 ...

  4. Hybrid App开发实战

    Hybrid App开发实战 作者 李秉骏 发布于 九月 04, 2013 | [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员 ...

  5. 【Hybrid App】Hybrid App开发 四大主流移平台分析

    转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...

  6. hybrid app开发工具

    hybrid app开发工具 1.AppCan AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行.并且着重解决了基于HTML5的移动 ...

  7. Hybrid App 开发模式

    开发移动App主要有三种模式:Native. Hybrid 和 Web App. 需要注意的一点是在选择开发模式的时候,要根据你的项目类型(图片类?视频类?新闻类?等),产品业务和人员技术储备等做权衡 ...

  8. Hybrid App 开发初探：使用 WebView 装载页面

    Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有 Web 技术跨平台特性.目前大家所知道的基于中间件的移动开发框架都是采 ...

  9. [目录]hybrid app 开发实战（基于ionic，cordova，angularjs）

    序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...

随机推荐

  1. 微信公共服务平台开发（.Net的实现）1 认证“成为开发者”

    http://www.cnblogs.com/freeliver54/p/3725979.html http://www.it165.net/pro/html/201402/9459.html 这些代 ...

  2. 洛谷P1403 [AHOI2005] 约数研究 [数论分块]

    题目传送门 约数研究 题目描述 科学家们在Samuel星球上的探险得到了丰富的能源储备,这使得空间站中大型计算机“Samuel II”的长时间运算成为了可能.由于在去年一年的辛苦工作取得了不错的成绩, ...

  3. Shiro切入Spring的方式

    在springMVC中要使用shiro,一般都遵循下面的配置: applicationContext-shiro.xml <bean id="shiroFilter" cla ...

  4. 【最短路径】 SPFA算法优化

    首先先明确一个问题,SPFA是什么?(不会看什么看,一边学去,传送门),SPFA是bellman-ford的队列优化版本,只有在国内才流行SPFA这个名字,大多数人就只知道SPFA就是一个顶尖的高效算 ...

  5. ActiveMQ 权限（一）

    在 ActiveMQ 认证(一) 中,若用户名或密码不正确,不能连接到ActiveMQ.我们可以通过配置文件,确用户是否有消息的读取.写入和管理的权限. 在plugin配置节点下,配置以下信息: &l ...

  6. [ARC053D]2 つの山札

    题意:给定排列$a_{1\cdots n},b_{1\cdots n}$,执行以下操作$2n-2$次来生成一个长度为$2n-2$的序列:选择$a,b$之一(选择的序列长度要$\geq2$),删除它的第 ...

  7. JDK源码(1.7) -- java.util.Iterator<E>

    java.util.Iterator<E> 源码分析(JDK1.7) ----------------------------------------------------------- ...

  8. redis细节

    Redis对于Linux是官方支持的,安装和使用没有什么好说的,普通使用按照官方指导,5分钟以内就能搞定.详情请参考: http://redis.io/download 但有时候又想在windows下 ...

  9. 《C# to IL》第三章 选择和循环

    在IL中,标号(label)是一个末尾带有冒号(即:)的名称.它使我们能够从代码的一部分无条件地跳转到另一部分.我们经常在由反编译器生成的IL代码中看到这个标号.例如: IL_0000: ldstr  ...

  10. RTL8188EUS带天线的WiFi模块

    http://www.liuliutech.com/ProductShow.asp?ID=121 一,公司介绍瑞昱(REALTEK)半导体成立于1987年,位于台湾[硅谷]的新竹科学园区.凭借着7位创 ...