jQuery hash 插件

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。

Hash存储数据有什么用

首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。

hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。

这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。

看看什么样子的

下图即是一个实例,网址正常部分是example.com/demo,然后在网址hash中存了数据keyA=valA和keyB=valB;它们之间用分号“;”隔开,第一个key名前也有分号。

jquery-hash-demo-pic-a

如果要用传统URL传递,则是example.com/demo?keyA=valA&keyB=valB的样子。

另外,如果URL本身带有一段hash,比如存在网页本身的锚点书签跳转,再储存数据时则可以是这样:

jquery-hash-demo-pic-b

其中index并不是数据,前面带有分号的才是数据。很容易区分。

怎样使用jQuery Hash 插件

使用方法非常简单。分别有设置值、增加一对值,改变值、读取值,以及删除值。此外,此插件必须先引入jQuery,很好兼容大多的版本。

设置值

只需运行

$.hash( ~keyName, ~value );

即可设置一对值。例如,运行$.hash(“color”, “yellow”);即可存储“color=yellow”到URL的hash里,使URL看起来像

example.htm#;color=yellow

增加值

想要增加一对值,同样运行设置值的脚本即可。例如再次运行$.hash(“fontSize”,”20px;”),既可新存储这对值到hash里,使URL看起来像

example.htm#;color=yellow;fontSize=20px

改变值

同样运行设置值的脚本,第二个参数改为你想要新值即可,这个操作会把此对值移到hash末尾突显改变。

例如运行$.hash(“color”,”green”);即可改变hash里已存储的color的值,使得URL看起来像

example.com#;fontSize=20px;color=green

读取值

只需运行

$.hash( ~keyName )

即可读取名为~keyName的值,例如现在运行$.hash(“fontSize”);则会返回“20px”。

删除值

要删除已经存储的一对值,可以运行

$.hash( ~keyName, null )

来删除它。例如现在运行$.hash(“color”, null);既可删除hash中已存储的color=green数据,使得URL看起来像

example.htm#;fontSize=20px

jQuery Hash 插件 Demo

如果你还不理解或者想要看demo,按此

获得jQuery hash 插件

要引入此插件非常简单,你可以到这里下载此js插件文件

然后在至少引入jQuery后的某个位置加入

<script src="jQuery.hash.js" type="text/javascript"></script>

写在最后

插件下载链接在上面。在此要感谢Lewis,这个插件是基于他的jQuery hash plugin修改的。目前不支持中文开头的key名。首先我考虑了一下,hash后面如果出现的是?或者&这些正规的参数符号的话比较容易和hash井号前面的参数混淆,所以我选择了一个更美观的符号“;”分号,占用体积小几乎看不到,但是不影响使用;不会和前面出现问号和and符号混淆,而且这个也不需要两个符号,只需要分号而已。但如果你需要传统and符,你可以去原作者网站上下载,或者基于这个插件自行修改。

谢谢收看。

原文:http://blog.netsh.org/posts/jquery-hash-plugin_1455.netsh.html

更多参考:

1. http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery-ba-hashchange-js.html

2. https://github.com/gcoguiec/jquery-hash

3. https://github.com/blixt/js-hash