近期在项目中进行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. Django学习笔记-2018.11.17

    URL配置: 项目下的urls.py配置的为URL总路径,在使用第二种方法在app下配置的urls.py是在总路径下的分路径 Templates: DTL初步使用 render()函数支持dict类型 ...

  2. 洛谷——P2393 yyy loves Maths II

    P2393 yyy loves Maths II 题目背景 上次蒟蒻redbag可把yyy气坏了,yyy说他只是小学生,蒟蒻redbag这次不坑他了. 题目描述 redbag给了yyy很多个数,要yy ...

  3. Unity 2D游戏开发教程之摄像头追踪功能

    Unity 2D游戏开发教程之摄像头追踪功能 上一章,我们创建了一个简单的2D游戏.此游戏中的精灵有3个状态:idle.left和right.这看起来确实很酷!但是仅有的3个状态却限制了精灵的能力,以 ...

  4. SpringBoot学习（四）

    spring boot 默认端口是 8080,如果想要进行更改的话,只需要修改 application.properties 文件,在配置文件中加入: 1. server.port=9090 其他常用 ...

  5. hdu 1114 dp动规 Piggy-Bank

    Piggy-Bank Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  6. RxJava 机制

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha rxjava 是  以 响应式 编程思想   编程的 java类库

  7. Linux下C语言多文件的编译以及makefile的应用

    1.关于编译和链接 一般来说,无论是C.C++,首先要把源文件编译成中间代码文件,在Windows下也就是.obj文件,UNIX下是.o文件,即Object File,这个动作叫做编译(compile ...

  8. QTREEⅠ SPOJ

    树剖模板,注意把边化为点后要查到y的儿子. #include<bits/stdc++.h> using namespace std; ; int f[N],bel[N],w[N],id[N ...

  9. [BZOJ4887][TJOI2017]可乐(DP+矩阵快速幂)

    题目描述 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且放在了加里敦星球的1号城市上.这个可乐机器人有三种行为: 停在原地,去下一个相邻的城市,自爆.它每一秒都会随机 ...

  10. Apache URLRewrite 原理及配置实现

    看一下网站上的一些 URL.您是否发现一些类似于 http://yoursite.com/info/dispEmployeeInfo. ... 99&type=summary的 URL?或者, ...