IT技术博客大学习 共学习 共进步

HTML5本地存储初探(一)

Time Machine 2010-04-14 13:37:02 浏览 4,424 次

    html5带给我们的不仅仅是更多语义丰富的标签,还有更多更牛逼的特性,比如“离线存储”。 对于台式电脑来说,或者它并没有带来什么惊喜,但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备,比如iphone,ipod touch,离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

    前面吹嘘了一段,不过说实在的,html5本地存储就目前来说还是很受限的。其一,浏览器限制,目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持,不过也有 Taffy DB 可以曲线救国。(还没有用过,不敢妄下结论。)。 其二,服务器端需要修改配置,旦如果是自己的服务器就很简单了。

    下面就以一个简单的offline web app-note book 为例,记录一下为iphone/ipod touch开发web app的过程。不是经验,只是初探。

建立适合 iphone/ipod touch 的UI数据的本地存储文件的本地存储完善这个app

    首先,适合iphone/ipod touch 的UI 它并不是本文的重点,有兴趣的同学可以移步这里 。这里只强调一点:你默认做的页面,放到iphone看会变的很窄,字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面,你的内容被按比例缩小了。要解决这个问题很简单,只要在html的head区域加一个meta标记,具体语法请看这里 。 也就是这样:

    viewport

    这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了,(针对设备开发可以不考虑兼容性,真是畅快淋漓呀。)

    我大概做了个丑陋的界面:

    app UI

    html代码CSS代码 (其实你可以不用看,最后有打包的代码)

    这篇先到这里,太长了你看着累我写着也累,咱慢慢来。:)

建议继续学习

  1. HTML5 离线缓存-manifest简介 (阅读 16,961)
  2. HFile存储格式 (阅读 15,822)
  3. 我对技术方向的一些反思 (阅读 11,144)
  4. 淘宝图片存储架构 (阅读 10,844)
  5. 海量小文件存储 (阅读 9,702)
  6. HBase技术介绍 (阅读 7,943)
  7. 存储基础知识之——硬盘接口简述 (阅读 7,406)
  8. 面向移动设备的HTML5开发框架梳理 (阅读 7,203)
  9. JavaScript,只有你想不到 (阅读 6,164)
  10. 如果用户在5分钟内重复上线,就给他发警告,问如何设计? (阅读 5,884)