你的位置:首页 > 网页设计

[网页设计]从Wep page到Application


需要做一个选择,是Web app还是Native app,当然,还有第三种选择,Hybrid app。

现在手机用户越来越多,电脑终端浏览器也在不断的更新换代,推陈出新,网页已经不仅仅是用来分享信息这么简单,可以用来做更多的事情。

本地存储升级

在以前,浏览器几乎不具备太多的存储能力。HTML5在存储方面做了重大的改进,提供了localStorage和sessionStorage对象用于小型数据的存储,更提供了WebDatabase以存储大量数据。

cookie与cookie的局限

Http本身是一种无状态无链接的协议,用户在浏览器上请求一个动作时,服务器不会知道用户上次动作做了什么,因此,如果要存储注入登录与否、已登录文本等状态信息是非常麻烦的。cookie的发明则满足了大部分的状态存储的需求。从根本上讲,cookie就是一段存储在客户端(浏览器)的文本,我们既可以在服务器响应返回时设置cookie,也可以在前端通过javascript进行修改。cookie有域限制,不同域的cookie相互不影响,也不能互相访问。

可以在谷歌浏览器的控制台输入document.cookie来查看当前网页所有可用的cookie,也可以通过这样的方式document.cookie="uid=123"来设置cookie,这条语句不会覆盖之前的cookie,只是自动添加到原先cookie的后面,不同的键值对用";"分隔。除了域的限制以外,还有一个大小和数量的限制对于我们数据存储来说,影响很大。不同的浏览器采用了不同的限制策略,但都不会很多。

来自HTML5的Web Storage

相比较于cookie而言,HTML5规范中的WebStorage更适合用作本地数据存储。Web Storage的使用非常方便,速度更快也更安全,只会存储在浏览器中而不会随HTTP请求发送到服务器端。它可以轻松存储大量数据而丝毫不会影响你网站的性能。

Web Storage使用

浏览器已经内置了两个已经实例化好了的对象,一个是sessionStorage,另一个是localStorage。

其中sessionStorage中存储的数据只是在单页面会话期间有效,sessionStorage更类似于一个页面上的全局变量。而localStorage的数据则会被持久化到客户端,而且永远不会过期(cookie可以设置过期时间),并且其容量也不会像cookie那样受限。

无论是sessionStorage还是localStorage,都可以使用下述这些方法或属性:

setItem(key,value)    getItem(key)    removeItem(key)    length    key(n)    clear()

这两者的区别是存储数据的声明周期不一样,只要一直在这个域内连续访问,存储在sessionStorage的数据会一直存在,一旦关闭页面或浏览器,所有sessionStorage存储的数据都会消失(也就是说,sessionStorage不会将数据存入磁盘)。

storage事件

对Storage对象进行的所有修改都会触发文档上的storage事件。其中事件对象会有以下属性:

domain        key     oldValue    newValue

例如:

document.addEventListener("storage", function(e) {console.log("Storage changed. Name '" + e.Key +"'"); });

由于这个事件有兼容性问题,一般不建议使用。

当然,并不是说localStorage大小可以无限使用,对于不同的浏览器,有不一样的设定,但大体上会给每个域设有5MB的存储空间,这对于大多数应用来说,已经足够了。

缓存和应用缓存

HTML5提供了一种独特的缓存机制:Application Cache(应用缓存)

顾名思义,这是为应用程序而生的缓存机制。主要是可以将服务器端的资源文件缓存至本地,至少有以下三个有点:

加速应用启动速度---省却了下载文件的时间

离线访问--利用离线缓存下来的页面和文件资源继续未完成的工作

节省服务器资源--更少的请求,意味着更小的服务器压力。

应用缓存的基本使用

一般而言,针对单页应用启用。

manifest

在文档中开启应用缓存非常简单,只需要在HTML标签中添加一个manifest属性,并指定manifest文件即可。

<!DOCTYPE html>

<html manifest="/appcache.manifest">

//这个html文件本身一定会被缓存

</html>

而appcache.manifest其实就是一个文本文件,里面指定了需要浏览器缓存的资源,比如像下面这个样子:

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

浏览器首次加载页面时会读取该文件,并下载和缓存它指定的资源,上面例子中缓存了四个文件,由于缓存是一次性的,因此如果四个文件有任何一个文件不可用,整个缓存行为将失败。除了文件中指定的四个需要缓存的文件以外,指定manifest文件的html文档也会被缓存下来。