二分之一

Just Jason's Blog

webapp

on html5 , webapp

HTML5本地存储localStorage和sessionStorage总结

html5本地存储是比cookie（4kb）大的多的本地存储方案，各浏览器支持大小不一致，大约5-10MB左右。各浏览器支持情况：
Chrome, Firefox 3.5+, Safari 4+, IE 8+

localStorage：永久存储本地数据（在没有清理缓存的情况下）
sessionStorage：在会话过程中存储本地数据

w3c API：

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

在线测试DOME：http://m.2fz1.com/storage.html

Tips:可以用手机测试，并内置weinre远程调试工具，在wifi环境下，同一局域网，使用webkit内核浏览器，打开以下链接，即可以远程调试：
http://debug.phonegap.com/client/#jsonzhou

存的的问题：

1、本文在anroid平台下分别使用，自带浏览器、chrome、海豚浏览器、UC进行了API测试，这几款浏览器支持都不错，只是用户如果要主动清掉存储的数据，需要进到“设置-应用程序-应用-清掉数据”。

2、localStorage可占满硬盘

W3C标准表示不可以通过子域名来突破单个域名下的存储限制，但大部份浏览器没有严格执行，只有firefox完美实现了w3c的标准，没有此问题。
原文：http://feross.org/fill-disk/

解决方法：
1、Chromium bug report
2、Apple bug report

Read more »

on html5 , webapp , NodeJs

使用weinre远程调试手机网页（nodejs、phoneGap）

本调试方式需要wifi环境和webkit浏览器。

weiner主页：http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

一、配置调试服务器

（一）、nodejs搭建调试服务器（以windows为例）

1、安装node.js
安装程序下载：http://nodejs.org/#download
本文安装在“F:/nodejs/”目录。

2、测试安装是否成功

打开CMD，切换到nodejs所在的安装目录。输入如下命令测试node.js和npm是否安装成功。默认windows最新安装包，会包含npm，如果npm没有安装，请手动安装。

C:\Users\jason>f:
F:\>cd nodejs
F:\nodejs>node -v
v0.10.0
F:\nodejs>npm -v
1.2.14

3、使用npm安装weinre,在node.js安装目录输入以下命令

npm install weinre

4、启动weinre服务器

node.exe node_modules\weinre\weinre --boundHost -all-

在windows下，系统防火墙可能会弹出是否允许其访问网络的提示，点击充许即可。

5、浏览器打开

http://localhost:8080

如果访问正常，说明服务器已配置成功。

（二）、直接使用phoneGap的调试服务器

如果觉得服务器配置麻烦，也可以使用phoneGap现成的调试服务器。
phoneGap调试服务器地址：http://debug.phonegap.com/（相当于本机安装的http://localhost:8080）

二、weinre使用方法

1、需调试的页面加入JS脚本

如：

<script src="http://你的调试服务器地址/target/target-script-min.js#anonymous"></script>

1.1使用收获夹快速添加调试脚本到需要调试的页面。

将以下代码添加到书签，访问需要调试的页面时，访问一下书签，即可以通过JS将调试脚本添加到当前页面，但部份浏览器不支持！

javascript:(function(e){e.setAttribute("src","http://你的调试服务器地址/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

2、在PC端使用webkit浏览器打开控制台

http://10.18.252.111:8080/client/#anonymous

后面为识别码

tips：识别码仅仅是为了识别多个需调试的项目时使用，可供多用户操作。

在控制台，你就可以轻松的调试手机网页了！

Read more »

on html5 , webapp

android下chrome调试手机网页的方法

论语曰“工欲善其事,必先利其器”！页面开发由于语言的特殊性，调试本身就有居多不便，在没有firebug和chrome开发者工具之前，简直就是噩梦。移动网页开发，调试比桌面网页开发难度更大。本文将在android平台和大家分享手机网页的调试方法。

准备： 1、Android SDK
2、桌面chrome(PC版)
3、android手机+移动chrome(Android 4.0系统以上版本)

步骤：

(一)、安装Android SDK
参考：我的另一篇文章：http://www.2fz1.com/?p=318
官网文档：http://developer.android.com/sdk/installing/installing-adt.html#Download

Tips:建议将adb.exe加入到环境变量，打开cmd窗口，输入adb，如果没有报错，说明adb.exe加入到环境变量了。

(二)、用USB连接手机和电脑，并将手机打开“USB调试”模式

(三)、打开移动chrome，点击菜单键->设置->开发者工具->启用USB网页调试。

(四)、在CMD窗口输入 

adb forward tcp:9222 localabstract:chrome_devtools_remote

(五)、打开PC上的chrome，输入

http://localhost:9222/

然后选择对应的手机页面，打开F12，和电脑网页一样调试。

但该方法需要使用http://chrome-devtools-frontend.appspot.com来代理页面，但这个域名可能需要翻墙，至少我这边访问不了。

参考文档：

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Read more »

on html5 , webapp

android网络抓包及Wireshark介绍

为了解phonegap及一些android应用的webview使用情况，查找了一些资料，总结如下：

主要操作流程如下：

使用TCPdump工具，抓TCP数据包。将数据包上传到PC,通过Wireshark查看数据包。

如果要从物理设备（手机）上抓包，要确保拥有该设备的root权限。本文是用android虚拟设备进行实验。

1、下载TCPdump

TCPdump下载地址http://www.strazzere.com/android/tcpdump

2、启动android虚拟机或手机，启动成功后，打开CMD，切换至adb.exe所在的目录

笔者的adb.exe所在目录为：E:\android\android-sdk\platform-tools\adb.exe

3、从PC上传TCPdump文件到手机的sd卡

adb push E:\android\tcpdump /data/local/tcpdump

4、设置tcpdump文件的权限

adb shell chmod 6755 /data/local/tcpdump

5、启动监听程序 并将监听的数据包存放在/sdcard/capture.pcap

adb shell /data/local/tcpdump -p -vv -s 0 -w /sdcard/capture.pcap

6、取消监听ctrl+c

7、下载数据包文件（.pcap文件扩展名）

adb pull /sdcard/capture.pcap E:\android

本文下载到E盘android目录

8、解包

得到的包文件是.pcap文件扩展名的文件。

官网下载wireshark软件：（免费开源）

http://www.wireshark.org/download.html

wireshark是一个免费开源的网络协议包分析软件，对于分析网络协议有很重要的帮助，它不同于Fiddler，不是通过代理实现的，能更加底层的抓取网卡上的数据包。

对于笔者，大多数情况只需要分析http包，所以我们打开数据包后，进行一下过滤。

/assets/upload/20121111161410.png

Read more »

on html5 , webapp

移动网页开发中不可或缺的viewport meta标签

看Ember.js的一个小项目实例，发现有viewport meta标签，查了一下资料，共享一下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

1、width: 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）

2、height: 和width相对应，指定高度

3、initial-scale: 初始缩放比例，页面第一次加载时的缩放比例

4、maximum-scale: 允许用户缩放到的最大比例，范围从0到10.0

5、minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0

6、user-scalable: 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

Read more »

on html5 , webapp

PhoneGap入门：使用Eclipse PhoneGap构建Android应用程序

一、安装Eclipse

Eclipse是完全免费的开源IDE，你可以从官网下载安装。

1、访问Eclipse官网：http://www.eclipse.org/downloads/，针对您的操作系统下载 Eclipse Classic 程序包。下载完后，解决即可，无需安装。

2、软件汉化： 下载语言包，笔者当前使用的Eclipse是4.2.1版本的，使用的最新语言包为BabelLanguagePack-eclipse-zh_4.2.0.v20120721043402.zip。

下载后的语言包，解决后直接覆盖到Eclipse对应的目录，然后将eclipse.ini文件中加-Duser.language=zh，重启即可。

你也可以这里选择更多的语言包：http://www.eclipse.org/babel/downloads.php

二、安装Android开发工具 ADT（为 Eclipse 配置 ADT 插件）

官网安装文档，请点这里。

三、下载并配置 Android SDK

在安装完 ADT 插件并重新启动 Eclipse 后，您需要将它配置为使用已下载至本地文件系统的 Android SDK。

四、下载并安装 PhoneGap

解压即可，需要新建Android项目进行配置，配置方法请参阅：

官网指南：http://www.phonegap.cn/?page_id=442#android

Adobe：Adobe指南

Read more »