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名前也有分号。

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

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

其中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

 

justcode.ikeepstudying.com