jQuery hash 插件

87590090

2015-06-13

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 插件

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

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

jQuery 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