不错的HTML5离线存储和缓存示例

8
我很想尝试一下HTML离线存储和缓存,以开发原型展示HTML5的离线Web应用程序功能。
我找到了一些特定于WebKit的示例,但我很难找到任何一个在Firefox 3.6中甚至能正常工作的样本代码。
对于样例,只要它能在以下情况下工作,我就会很满意:
- 我们公司广泛使用jQuery,因此我更喜欢使用该库或纯JavaScript的示例。 - 它至少应该在Firefox上运行(3.6+也可以)。
有人能指向一些提供指导和代码示例的链接吗?
5个回答

3

1
谢谢 - 那里有一些好东西,还有帖子评论中也有。 - Nils

3

我找到了这个例子,它是使用本地存储最简单/最好的事例。它只演示了本地(持久)存储,而不是数据库存储。另外,如果你想要会话存储,只需将“localStorage”更改为“sessionStorage”。

我认为JavaScript不能再简单了。

w3.org示例

对了,它在Firefox中运行良好(至少对我来说是这样的)。


1

我建议看一下CSS NinjaFont Dragr演示,尽管主要是为了展示在Firefox中使用HTML5的文件API,但也利用了离线存储。

如果没有别的,这个家伙确实知道他的东西,并且可以提供很好的示例。


1

最近我发现了一个非常不错的HTML5演示页面,所以想在这里分享一下。

html5demos.com

编辑 - 另一个可能有帮助的链接:

来自Google Chrome开发团队的HTML5rocks,是一个网站,旨在展示和教育网站管理员HTML5的新功能。

www.html5rocks.com

编辑 #2 - 这是我迄今为止遇到的最好的文章之一:

使用HTML5本地存储优雅地包装事物


0

现在所有主流浏览器都支持离线存储,因此我创建了一个处理表单状态的jQuery插件。http://www.jasonsebring.com/dumbFormState,源代码简洁易懂。

我推荐使用Douglas Crockford的JSON2.stringify方法进行序列化: https://github.com/douglascrockford/JSON-js,将JavaScript对象转换为JSON字符串。然后,您可以轻松地将其保存到window.sessionStorage或window.localStorage中,如下所示:

// 设置数据

window.sessionStorage['mydata'] = JSON.stringify(someObject);

// 获取数据

someObject = jQuery.parseJSON(window.sessionStorage['mydata']);

另一件需要考虑的事情是对键进行命名空间处理。对于我所做的事情,我希望它是自动的,因此键名是基于“dumbFormState-”+ window.location.pathname +“-”+表单索引保存的,以确保键自动唯一,然后您可以稍后通过检查前缀“dumbFormState-”匹配它们的键来循环删除它们,因为您不想删除其他人可能使用的任何其他内容。

希望这能有所帮助。


一个小注释,对于较新的浏览器,不建议使用Crockford的JSON2.stringify API。现在这个API已经在浏览器中得到了原生支持。 - Kiran
不错的观点,但是脚本使用本地支持的方式。-> https://dev59.com/cHM_5IYBdhLWcg3wNgKY - King Friday

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接