×
Namespaces

Variants
Actions

HTML5 - 存储

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
文章
max.chen 在 24 Jan 2011 创建
最后由 hamishwillee 在 04 May 2012 编辑


Contents

简介

HTML 5 中一个最有用的新特性是本地存储的标准化。最终,Web 开发人员可以不再试图将所有客户端数据都填塞到 4 KB 的 Cookies 中。现在您可以利用一个简单的 API 将大量数据存储在客户机上。这是一个完美的缓存机制,可以大大提高应用程序的速度 —— 速度对于移动 Web 应用程序是一个至关重要的因素,因为它们相对于桌面应用程序来说,依赖的是慢得多的连接。本文中,您将了解如何使用本地存储,如何调试它,以及使用它来改善 Web 应用程序的各种方式。

本地存储基础

Web 开发人员多年来一直在尝试将数据存储在客户机上。HTTP Cookies 被滥用于此目的。开发人员将大量数据挤放在 HTTP 规范分配的 4KB 上。原因很简单。出于各种原因,交互式 Web 应用程序需要存储数据,并且将这些数据存储在服务器上通常效率低下、不安全或者不适当。多年来,这个问题有了好几种备选方法。各种各样的浏览器已经引入了专有存储 API。开发人员也利用了 Flash Player 中的扩展存储功能(通过 JavaScript 实现)。类似地,Google 为各种浏览器创建了 Gears 插件,并且它包含了存储 API。毫不奇怪的是,一些 JavaScript 库试图抹平这些差异。换句话说,这些库提供一个简单的 API,然后检查有哪些存储功能(可能是一个专有浏览器 API 或者是一个诸如 Flash 的插件)。 对 Web 开发人员来说幸运的是,HTML 5 规范最终包含了一个针对本地存储的标准,被广泛的浏览器所实现。事实上,该标准是最快被采纳的标准,在所有主要浏览器的最新版本中都受到支持:Microsoft®、Internet Explorer®、Mozilla Firefox、Opera、Apple Safari 和 Google Chrome。对于移动开发人员更为重要的是,它在基于 WebKit 的浏览器(诸如 iPhone 和使用 Android(版本 2.0 或更高版本)的手机中的浏览器)以及其他移动浏览器(比如 Mozilla 的 Fennec)中受到支持。记住这一点,我们来看一下这个 API。

localStorage API

Storage API 是一种经典的名/值对数据结构。您将使用的最常见的方法是 getItem(name) 和 setItem(name, value)。这些方法完全跟您预期的一样:getItem 返回与名称相关联的值,如果什么都不存在,则返回 null,而 setItem 要么是将名/值对添加到 localStorage,要么是取代现有值。还有一个 removeItem(name),顾名思意,它从 localStorage 删除一个名/值对(如果存在的话,否则什么都不做)。最后,对于在所有名/值对上迭代,存在两个 API。一个是长度属性,给出正在存储的名/值对的总数。对应地,一个 key(index) 方法从存储中使用的所有名称中返回一个名称。 利用这些简单的 API,可以完成大量任务,比如说个性化或跟踪用户行为。这些可以说对移动 Web 开发人员是重要的用例,但是还有一个更为重要的用例:高速缓存。利用 localStorage,可以在客户机的本地机器上容易地从服务器高速缓存数据。这让您无需等待可能缓慢的服务器回调,并且最小化了对服务器上数据的需求量。现在来看一个例子,演示了如何使用 localStorage 来获得这种高速缓存。

下面的代码演示了如何创建一个localStorage,这里我们创建的localStorage是持久的。

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

上面的代码仅仅演示了数据的存储和读取,接下来的代码将演示如何实现一个计数器,来记录页面访问的次数:

 <script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

sessionStorage API

sessionStorage API 和localStorage是一致的。实际上,根据 HTML 5 规范,它实现了 DOM Storage 接口。差别的原因是,HTML 5 指定两个不同的对象实现该接口:localStorage 和 sessionStorage。sessionStorage 对象是一个只在会话期间存储数据的 Storage 实现。更确切地说,只要没有可以访问 sessionStorage 的脚本正在运行,浏览器就可以删除 sessionStorage 数据。这是与 localStorage 相对的,后者跨多个用户会话。两个对象共享相同的 API。

仍然以上面的计数器为例:

if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

与localStorage计数器不同的是,sessionStorage中记录的数据仅限于当前的会话(session),当用户关闭浏览器结束会话后,sessionStorage的数据也就不存在了。


除了上面最常用的getItem()和setItem()方法,还有一些其他的方法可以使用,例如清除键值对使用removeItem()方法。如果希望一次性清除所有的键值对,可以使用clear()方法。

在QtWebKit中使用HTML5存储

要在QtWebKit中使用HTML5的内容,首先要新建一个Qt项目,如何新建一个Qt项目请参考 如何将WRT widget移植到Qt 。当我们查看Qt文档时,会发现QWebSettings中有几个和HTML5存储相关的属性在缺省时都是disable的。我们可以通过QWebSettings静态方法:

void QWebSettings::enablePersistentStorage ( const QString & path = QString() ) [static]

打开这些开关。我们的应用就可以支持HTML5存储了。enablePersistentStorage ()的相信使用方法,请参考Qt帮助文档。


例程

Media:HTML5_Storage.zip

This page was last modified on 4 May 2012, at 04:01.
216 page views in the last 30 days.
×