从网页（web page）到应用（Application）

一、本地存储升级

传统的网页和客户端软件之间的一个很大的区别便是后者会在用户的机器上存储数据，在以前，浏览器几乎不具备太多的本地存储能力，这使得浏览器端迟迟没有出现诸如Excel和Word等数据型程序（没人喜欢写到一半的文档就消失了的情况）。HTML5在存储方面做了重大的改进，提供了localStorage和sessionStorage对象用于小型数据的存储，更提供了Web Database以存储大量数据。

1.1  cookie和cookie的局限

HTTP本身是一种无状态、无连接的协议，用户在浏览器上请求一个动作时，服务器不会知道用户上次动作做了什么，因此如果要存储诸如登录与否、已录入文本等状态信息是非常麻烦的，对于开发交互式的程序来说这很致命，而cookie技术的发明则满足了大部分的状态存储需求。从根本上讲，cookie其实就是一段存储在客户端（浏览器）的文本，我们既可以在服务器响应返回时设置cookie的值，也可以在前端通过JavaScript进行修改。

1.1.1 cookie是如何存储的

我们考虑最简单的登录场景来说明cookie是如何实现状态存储的。当你向百度服务器发送了你的用户名密码并且验证过你的身份之后，服务器端会在响应客户端时的HTTP包的包头中加上一个Set-Cookie字段，这个字段则可能是类似uid=123的值，是服务器分配给你的标识符，这段文本将存储在你的计算机磁盘中，当你继续浏览百度的其他页面时，每次HTTP请求都会带上cookie这个字段，这样服务器端就可以确认这个请求依然来自于登录后的你，从而从某种意义上来说“保存”了登录状态，这时读者可能要问了，不同网站登录时都会发送吗？那岂不是谷歌就可以知道我的百度账号了？当然不是cookie的使用是有限制的，这个限制便来自于域，不同域间的cookie是不会影响也不可访问的。

uid是一个cookie的名称（name）,用于唯一标识一个具体的cookie，但cookie的名称是不区分大小写的。而123则是该cookie的值（value），除了名值外，还包括域、路径和失效时间等信息，所有这些信息都可以通过前后端两个路径进行设置。

1.1.2 cookie的基本操作

在浏览器上我们通过对document.cookie属性的存取来操作cookie。随便打开一个网页，在chrome控制台中键入document.cookie后回车即可看到此页面下可用的完整的cookie内容，会是如下形式的值：

“xsrf=3779292c;uid=EPACMJGJBNKKLOFF;serial=27EA”

可以看到document.cookie属性是一些由分号分割的键值对组成的字符串，如果要设置一个cookie，我们可以这样做：

document.cookie="uid1=123"

这时我们创建了名为uid1，值为123的cookie。document.cookie并不仅仅是一个普通的字符串，这个属性有着很奇怪的特性，虽然上面的语句看起来是赋值语句，但却不会覆盖cookie原来的值，而是会将新的cookie添加到后面，创建完毕后的document.cookie会是这样：

“xsrf=3779292c;uid=EPACMJGJBNKKLOFF;serial=27EA;uid1=123”

可以看到新创建的cookie添加到后面了，但由于直接访问document.cookie只能获取到完整的字符串，要进一步获取具体的键值对就必须得手工操作这个字符串。

1.1.3简化cookie操作

为了方便地操作cookie，恶魔可以封装两个函数，名为getCookie和setCookie:

function getCookie(name){

var cookieName=encodeURIComponent(name)+"=",

cookieStart=document.cookie.indexOf(cookieName),

cookieValue=null,

cookieEnd;

if(cookieStart>-1){

cookieEnd=document.cookie.indexOf(";",cookieStart)

if(cookieEnd==-1){

cookieEnd=document.cookie.length

}

cookieValue

decodeURIComponent(docment.cookie.substring(cookieStart cookieName.length,cookieEnd))

}

return cookieVlue

}

function setCookie(name,value,opt_expires,opt_path,opt_domain,opt_secure){

var cookieText =encodeURIComponet(name)+"="+encodeURICompoent(value)

if(opt_expires instanceof Date){

//cookie的过期时间只支持GMT格式

cookieText+=";expires="+opt_expires.toGMTString()

}

if(opt_path){

//path表示cookie起作用的路径，比如:path1下设置的cookie，path2的页面则无法访问

cookieText+=";path="+opt_path

}

if(opt_domain){

//只能设置子域，而不能跨根域

cookieText+=";domain="+opt_domain

}

if(opt_secure){

//安全标志，指定该标志后只有在使用SSL连接时才会发送cookie(即发送到https://开头的域)

cookieText+=";secure"

}

document.coolkie=cookieText

}

代码完整展示了如何存取一个具体的cookie，之所以在每个过程都是用encodeURIComponent和decodeComponent对名值对儿进行编解码是为了确保cookie能被正确发送到服务器。setCookie()函数只有key和value是必须的，domain等参数可选且不会发送到服务器，比如现在要想取名uid的cookie值，并在后面加上4，我们可以这样做：

setCokie(‘uid’,getCookie(‘uid’+4))

如果要删除一个cookie，我们只需要将key的值设置为空字符串，并将它的过期时间设置为过去的时间即可，由此可以得到下面这个unsetCookie函数：

function unsetCookie(name,path,domain,secure){

setCookie(name,"",new Date(0),path,domain,secure);

}

由此一来这个蹩脚的借口已经变得很方便开发人员操作了。

1.1.4cookie的其他限制

除了之前提到的域限制以外，cookie还有一些其他的限制，其中比较重要的便是大小的限制。不同浏览器在实现cookie时，采用了不同的限制策略。常见浏览器在cookie的数量上限制如下：

IE6及更低版本每个域最多20个cookie。

IE7及更高版本每个域最多50个cookie。

FireFox每个域最多50个cookie。

Opera为每个域30个cookie。

WebKit内核（Safari&Chreme）没有对cookie数量做明确限制，但是如果cookie太大以至于超过了HTTP头部限制，服务器将无法正确处理。

为了突破cookie个数限制，可以采用一种名为cookie的技术，其基本原理是在一个cookie中存储多个键值对。

除了数量限制，浏览器对cookie的尺寸也做了限制，大多数浏览器都将cookie的尺寸限制在4096B左右。

虽然cookie会存在用户磁盘里，但严格来说cookie并不能算是本地存储技术。因为每次请求站点的所有cookie都会被发送到服务器，如果将太多数据存放在cookie当中会严重降低传输性能，加上cookie本身还有大小和数量限制，所以cookie并不合适在客户端存储数据。如果要在本地存储大量数据，还得另寻其他方式。

摘自：HTML5移动Web开发实战详解     作者：林珑