<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。 版本: jQuery v1.3.2+…
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