四种有能力取代Cookies的客户端Web存储方案

四种有能力取代Cookies的客户端Web存储方案(1)目前在用户的网络浏览器中保存大量数据需要遵循几大现有标准，每一种标准都拥有自己的优势、短板、独特的W3C标准化状态以及浏览器支持级别。但无论如何，这些标准的实际表现都优于广泛存在的cookies机制。AD：目前在用户的网络浏览器中保存大量数据需要遵循几大现有标准，每一种标准都拥有自己的优势、短板、独特的W3C标准化状态以及浏览器支持级别。但无论如何，这些标准的实际表现都优于广泛存在的cookies机制。今天的Web应用程序开始在客户端中执行大量数据处理工作，甚至可能需要以脱机方式完成任务。可以说，客户端数据存储对于下一代Web应用程序的发展起到了至关重要的作用。然而直到现在，cookies仍然是用户浏览器中最常见的数据存储机制。如果一款Web应用需要重复访问某些数据，则只有两种方式可供选择：要么再次向服务器发送请求以获取数据，要么读取保存在cookies中的内容。cookies机制只能提供有限的存储空间最多4K或者4096字节因此总量较大的数据会被拆分成4K大小的块从而加以明确而直接地管理。但这种方式对于存储的协作及管理而言显然并不可行，因此我们需要拿出一套新的替代性方案。cookies的承受能力太过孱弱网络浏览器最初只是通过HTTP并解析HTML实现应用程序对文档内容的加载。但在此后不久，第一款网景浏览器出现了，它满足了用户的一系列实际需求，但却需要利用本质上无状态的HTTP协议来通过某些机制实现状态追踪。面对这一问题，LouMontulli于1994年创造了浏览器cookie（当初被称为magiccookie），并首次亮相于Mosiac网景浏览器0.9b版本之上。在通用网关接口（简称CGI）提供的服务器端脚本访问功能与cookies的共同辅助下，最早的Web应用程序终于变成现实。最终，我们开始沿着这条小路将浏览器转化成为一种通用的应用程序平台。然而cookies机制存在着严重缺陷。正如前面所提到，它只能存储极少量数据，而且很容易受到各类攻击活动的影响，这样的状况让我们很难利用其存储个人信息及敏感数据、从而极大限制了它的使用范围。cookies会介入到从浏览器发向服务器端的每一条HTTP请求当中。假设一个网页中包含的四张图片、一个外部CSS文档外高山茶eupai.net加JavaScript文档。系统会为该域设置一个4K的cookie，浏览器则分四次将该cookie转发至服务器端一次针对HTML页面、一次针对每张图片、一次针对CSS文档再加上一次针对JavaScript文档。令问题进一步复杂化的原因在于，这个理论上为4K大小的cookie需要从浏览器端传输至服务器端；由于大部分用户使用的是异步互联网连接，即上传速度低于下载速度，因此在HTTP响应头中传输cookie数据一定会造成不必要的带宽占用。由于上述限制因素的存在，大部分cookies的体积都要远小于4K。谷歌建议每个cookie的实际大小不要超过400字节（或者200个水草玛瑙mnwg.net字符），从而实现最佳性能表现。他们还建议称，在图片、CSS以及JavaScript等来自独特域的静态文件应该禁用cookies机制。由于cookies机制在本地存储领域存在诸多问题，目前已经出现一系列新兴方案，旨在拨乱反正、保质保量完成任务。近几个月以来，已经有两款方案走上正轨、得到W3C的强烈推荐它们能够很好、甚至比我们预想中更好地帮助浏览器支持本地存储功能。目前我们可以从四种主流客户端数据存储机制中做出选择，它们分别是：WebSQL、IndexedDB、WebStorage以及ApplicationCache。下面我们就逐一对每套方案加以评述，并探讨它们在运作及效果方面的各自特性。WebSQL:擅长（但是否有些过时？）数据库创建与执行WebSQL是一种利用数据库进行数据存储并利用SQL处理检索任务的API。最近，Safari、Chrome以及Opera等知名浏览器纷纷在WebSQL与IndexedDB的竞争之中选择了前者。不过2010年时，SQLite还是惟一一款能够与WebSQL协作的数据库，而W3C出于安装基础较小的理由而停止对这套方案进行支持。WebSQL的工作机制相当新奇，下面我们就一起来看示例代码。WebSQL数据库的使用感受与关系类数据库及SQL非常相似。使用这款数据库的第一步在于创建并打开。如果大家不希望额外创建一套数据库，那么完全可以直接开始使用，API本身会自动完成创建工作。下面我们来看一部分用于数据库创建的代码：vardb=openDatabase('cats','1.0','acatalogofmycats',2*1024*1024);按照从左到右的顺序，openDatabase后面的参数依次代表着数据库名称、版本号、文字说明以及预计数据库大小。数据库创建完成之后，大家就可以着手使用了。在WebSQL数据库上执行SQL与创建事务对象并加以执行一样简单：db.transaction(function(tx){tx.executeSql('CREATETABLEcats(idunique,name)');tx.executeSql('INSERTINTOcats(id,name)VALUES(1,Mr.Jones)');});尽管Safari、Chrome、Opera以及MobileSafari都支持这款API，但自2010年以来WebSQL就没有发生过任何变化，因此它不太可能成为本地存储的新型标准。WebStorage:取cookies所长、去cookies所短WebStorage利用一种简单的方法在用户的浏览器中存储键值对。但它与cookies之间的相似之处也就仅此而已了。WebStorage是一套持久性方案。一旦某个值被存储之后就不会再消失或者终止，除非被应用程序或用户明确删除。WebStorage能够处理大量数据。目前浏览器的总体存储区域大小最高为5MB。WebStorage无需依赖于服务器，而且不必向服务器端发送数据。当然，大家可以随意实现本地化数据存储并将其与服务器进行异步式同步，但WebStorage的表现始终出色而且在离线与在线状况下都能正常生效。WebStorage提供四种主要方法getItem（键）；setItem（键、值）；removeItem（键）以及clear（）。最后，WebStorage包含两种完全不同的存储类型：SessionStorage以及LocalStorage。SessionStorage的作用在于保证被保存在当前浏览器窗口当中的数据仅作用于该窗口。举例来说，当大家使用电子商务类应用程序时，利用SessionStorage来记录用户的购物车信息能够避免误操作所带来的二次购买状况。下面再来看LocalStorage，它专门负责保存可同时作用于同一浏览器之下各窗口及标签之间的数据。因此，如果大家在Chrome当中打开了三个关于同一网站的窗口，那么三者能够共同使用同一套LocalStorage容器。相比之下，如果我们打开三个内容彼此独立的网站窗口，那么每一个都将使用彼此独立的容器。同样，如果大家在不同的浏览器当中打开同一个网站，那么每种浏览器都需要使用属于自己的容器，因此无法共享同一套通用的运行环境。要设置一套新的键-值对并进行检索，大家可以使用下列JavaScript命令：firstsetfirstnameequaltoSparky.localStorage.setItem(firstname,Sparky);next,getthevalueoffirstname(hint,itwillbeSparky).localStorage.getItem(firstname);今年夏天，WebStorageAPI正式获得W3C推荐标准这一殊荣。展望未来，WebStorage完全有可能在一切原本cookies发挥作用的舞台上成为新的处理方案。但WebStorage能做的还很多。如果大家的数据集并不太大，WebStorage还提供另一种可能是最为简便的处理办法甚至比cookies更简便从而顺利搞定浏览器中键-值对的设置与检索工作。12下一页查看全文内容导航第1页：cookies的承受能力太过孱弱第2页：IndexedDB：可搜索且不存在文件大小限制Windows编程启示录主要内容：●如何设计像自动售货机那样有效的用户界面。●深入理解窗口和对话框的管理机制。●为什么性能优化与我们在