html5本地存储在手机web app中使用探讨

======================================================
注：本文源代码点此下载
======================================================

前段时间参与了一个手机app嵌入webview应用的项目,感触颇多。正如前一篇博文“html5+css3方式实现mobie app的一些瓶颈”所述,存在用web方式实现确实存在很多瓶颈。

最近研究了下竞争对手的一款mobie app产品,存在一些值得学习和改进的地方:其首页(列表页)将所有的商品信息都请求下来,所以耗时会比较长。但由于是native app,有程序启动画面和loading图片的存在,再加上手机用户对加载速度有心理预期,所以对用户体验影响不大。由于其对所有商品信息的缓存,用户由首页进入详情页后就可以将缓存的信息先展示给用户(而且缓存的信息刚好占满手机的一屏),其他内容随后加载。这样,用户由首页进入商品页和分类列表页时,给用户的感觉是相当之快。

他们用到的技术也没什么特别,也就是常说的本地存储。个人感觉,客户端做本地存储是相对容易的一件事情。html5的新特性中不是支持了对本地存储的功能吗,对于老版本不支持的本地存储的设备可以不用存储,也能达到优雅降级。故html5本地存储可以一试。

html5提供的本地存储的相关内容可以分为两个部分:客户端数据存储和离线存储。

客户端存储有localstorage, sessionstorage, client-side database三种。localstorage和sessionstorage是简单的键值对存储,类似web中经常用到的cookie,也是通过js设置name和value;不同的是cookie会发送到服务器,并且其数量和大小有相应的限制。client-side database则相对更强大一些,可以在本地进行创建数据库、本地数据库表进行增删查改等操作。

离线存储则是通过manifest文件对本地文件和需要服务器加载的文件进行配置,一般会对静态页、css、js、图片等静态文件进行离线存储类似于用浏览器在本地跑一个静态页面。当然好处是一些不变更的静态文件可以直接放在本地,而不需要从服务器端获取。

回到项目本身,我需要做的是将列表页面的数据缓存下来,然后在商品页预先显示出来,其他的数据再自行加载。这里我们可以通过使用客户端存储技术将所需的数据存储在本地,但问题是读取本地存储的操作是在js中进行的,而js赖以存在的商品页面不是存在本地的,而是需要和服务器建立连接从服务器获取的。而和服务器建立连接所花费的时间正是我们的瓶颈所在,本地存储的所产生的好处(一个html页面中少请求的一些字节)相比于此完全可以忽略不计。

再看看离线存储,我们倒是可以将一些持久化的css、js和图片放在本地通过manifest文件的配置,而无需从服务器端获取。但是也没有达到我们的项目需求。

至此,我看出来一些门道:b/s, c/s两种开发模式虽说有很多相同相似的地方,但其各自优缺点决定了其适合开发何种形式的程序。html作为web开发语言是为b/s开发服务的,即使html5提供了强大的一些特性,也是为web提供的,木有考虑到客户端开发。

不过,html5在制作mobile本地离线应用还是有较强的支持的,canvas、本地数据库对于制作本地应用还是提供相当大的便利。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/