jQuery hash 插件

系统 1677 0

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

jQuery hash 插件


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论