近期在项目中进行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. Java利用Redis实现消息队列

    应用场景 为什么要用redis?二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成ja ...

  2. SCU 4445 Right turn

    模拟. 每次找一下即将要遇到的那个点,这个数据范围可以暴力找,自己的写的时候二分了一下.如果步数大于$4*n$一定是$-1$. #include<bits/stdc++.h> using ...

  3. XV6操作系统代码阅读心得（二）：进程

    1. 进程的基本概念 从抽象的意义来说,进程是指一个正在运行的程序的实例,而线程是一个CPU指令执行流的最小单位.进程是操作系统资源分配的最小单位,线程是操作系统中调度的最小单位.从实现的角度上讲,X ...

  4. Nginx配置站点https

    step 1: 检查nginx的编译参数 使用nginx -V可以查看,如果编译参数中包含http_ssl_module,可以继续下一步操作,如果没有,则需要从新编译. step 2: 申请证书 目前 ...

  5. Java常用工具类之发送邮件

    package com.csice.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...

  6. 折半搜索【p4799】[CEOI2015 Day2]世界冰球锦标赛

    Description 今年的世界冰球锦标赛在捷克举行.Bobek 已经抵达布拉格,他不是任何团队的粉丝,也没有时间观念.他只是单纯的想去看几场比赛.如果他有足够的钱,他会去看所有的比赛.不幸的是,他 ...

  7. braft初探

    接上一篇<brpc初探>. 什么是RAFT 看内部一个开源项目的时候,一开始我以为他们自己实现了raft协议.但是看了代码之后,发现用的是braft.因为在我们自己bg里一直在提paxos ...

  8. MongoDB——环境搭建

    项目中需要将一些读多改少的数据存入到 MongoDB 数据库中来提高效率,于是简单学习一些MongoDB数据库的知识,来进行应对,也是对自己知识盲区进行补充.本文主要学习介绍MongoDB数据库在Li ...

  9. Codeforces 1103 C. Johnny Solving

    Codeforces 1103 C. Johnny Solving 题目大意: 有一张 \(n\) 个点 \(m\) 条边的简单无向图,每个点的度数至少为 \(3\) ,你需要构造出两种情况之一 一条 ...

  10. [bzoj3625][Codeforces 250 E]The Child and Binary Tree（生成函数＋多项式运算＋FFT）

    3625: [Codeforces Round #250]小朋友和二叉树 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 650  Solved: 28 ...