近期在项目中进行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. Python数据类型-元组

    元组的基本操作: 获取元素个数:len() 连接两个元组:元组1 + 元组2 复制多个元组:元组 * 复制数量 获取单个元素:元组[索引位置] 获取多个元素:元组[起始位置:终止位置:间隔数量] 获取 ...

  2. Struts2 MVC基础介绍

    流程介绍 我们模拟一个请求/响应的情景,来介绍Struts的工作流程.注意,下面的序号和图中的序号没有严格的对应关系. 浏览器向系统发出请求,请求的地址是ac.action 请求被StrutsPrep ...

  3. Java常用工具类之删除文件

    package com.wazn.learn.util; import java.io.File; /** * 删除文件工具类 * @author yangzhenyu * */ public cla ...

  4. 分布式锁的理解，java自带的锁为什么会失效

    前段时间在发送短信的代码块上通过网上找的工具类基于Redis实现了分布式锁的功能 对应的链接https://www.cnblogs.com/c-h-y/p/9391602.html 周末想细细看一下. ...

  5. hdu 1874 畅通工程续（迪杰斯特拉优先队列，floyd，spfa）

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  6. [BZOJ1492][NOI2007]货币兑换Cash(斜率优化+CDQ分治)

    1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 5838  Solved: 2345[Submit][Sta ...

  7. 【树哈希】poj1635 Subway tree systems

    题意:给你两颗有根树,判定是否同构. 用了<Hash在信息学竞赛中的一类应用>中的哈希函数. len就是某结点的子树大小,g是某结点的孩子数+1. 这个值也是可以动态转移的!具体见论文,所 ...

  8. Neo4j之Cypher学习总结

    Cypher 语句 Cypher是图形数据库Neo4j的声明式查询语言. Cypher语句规则和具备的能力: Cypher通过模式匹配图数据库中的节点和关系,来提取信息或者修改数据. Cypher语句 ...

  9. Java高级架构师（一）第40节：更多模块的基本功能和配置

  10. ORACEL 创建表空间

    注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...