×
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 01:01.
253 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×