首页
登录
评论

利用 Sisyphus.js 为 WordPress 博客增加自动保存评论草稿的功能

2014年初的时候,翼帆远航曾发表过一篇文章《WordPress 技巧:为评论添加自动保存草稿的功能》,那篇文章介绍了一种用 Cookie 来保存评论草稿的方法,但后来随着我对 Cookie 和 LocalStorage 了解的加深,我发现 LocalStorage 更适合用来储存评论的草稿。我将会在文章的最后介绍为什么选择 LocalStorage 而不是 Cookie。

我们先来看下效果吧,这里借用另一篇文章的截图,最终效果相同但实现方法不同:

comment_draft_autosave

Sisyphus.js 是什么?

今天要介绍的 Sisyphus.js 是一款由 Alexander Kaupanin 开发的类似 Gmail 客户端草稿保存的 jQuery 插件,它会将我们指定的表单自动保存在 LocalStorage 中。我们将其应用在 WordPress 博客上,可以达到实时保存评论并在页面刷新以后自动恢复的效果,可以避免某些可能导致访客评论意外丢失的情况。

开始动手吧

完成以下步骤,你的博客将具有自动保存评论草稿的功能。

1、引入 jQuery 库
(如果之前引入过,则此步跳过;若不确定,则此步照做)
在主题目录下的 header.php 中 <head> 与 </head> 之间合适的位置插入以下 jQuery 引入代码:

2、引入 sisyphus.min.js
右键另存为 sisyphus.min.zip,解压出 sisyphus.min.js,将其放在主题目录下的 js 文件夹(/wp-content/themes/主题名/js/sisyphus.min.js),然后在主题目录下的 header.php 中与之间合适的位置插入以下代码(注意:此代码段必须放在第1步所加代码后面)

3、设置自动保存评论草稿
在第2步的代码后添加如下代码:

至此,所有步骤完成。

Sisyphus.js 的更多用法

详情请见其项目主页:http://sisyphus-js.herokuapp.com/

为什么选择 LocalStorage?

本地存储的发展:

LocalStorage

由上图可知,Cookie 是最早出现的,面对现在评论内容的储存,主要有两个瓶颈:

  1. 储存空间小。如果评论的内容多一些呢?那么 Cookie 就放不下了。
  2. Cookie 数据始终在同源的 HTTP 请求中携带(即使不需要),影响网页的加载速度。

相比 Cookie,LocalStorage 就不存在这两个问题。

LocalStorage 的支持情况:

LocalStorageSupport

13 条评论

  1. headroom.js 这个现在有个插件可以直接使用了,效果看我的测试站点!!

  2. 第3步的代码好像没有在评论框附件运行!

  3. 本地测试了下,貌似效果出不来呀,感觉没有和 关联起来。

  4. 这个真心不错,原来那个也不错。

发表评论

您的邮箱地址将不会被公开