URL中的hash，也就是網(wǎng)址井號(hào)后面的部分，其實(shí)是一塊寶地，它能創(chuàng)建瀏覽歷史，也能存儲(chǔ)一些簡(jiǎn)單數(shù)據(jù)。從 Twitter 開(kāi)始Hash被用來(lái)定義Ajax內(nèi)容，雖然如今已被HTML5的 pushState 所替代。這里介紹 jQuery ? Hash ? 插件 ，可以幫助你完成簡(jiǎn)單數(shù)據(jù)的存儲(chǔ)。

?

Hash存儲(chǔ)數(shù)據(jù)有什么用

首先傳統(tǒng)URL傳遞數(shù)據(jù)的弊端是，對(duì)搜索引擎不友好，搜索引擎會(huì)認(rèn)為 /example和/example?key=val是不同的網(wǎng)址，然而hash則不同，搜索引擎認(rèn)為 /example 和 /exmaple#;key=val 會(huì)是兩個(gè)完全相同的網(wǎng)頁(yè)。此外，用hash存儲(chǔ)數(shù)據(jù)也不必刷新頁(yè)面。

hash可以作為一種本地臨時(shí)存儲(chǔ)的解決方案，正如cookie那樣。可以在url中保存臨時(shí)的用戶(hù)狀態(tài)這是cookie做不了的。例如含有Ajax頁(yè)面的刷新，就可以直接利用hash存儲(chǔ)當(dāng)前的狀態(tài)。再例如你可以配合 Hashchange 監(jiān)聽(tīng)來(lái)完成一些事情。

這算是一個(gè)嘗試，雖然目前少有人在hash存數(shù)據(jù)上作文章，但是如果你真的需要，可以用這個(gè)插件參考一下。

?

看看什么樣子的

下圖即是一個(gè)實(shí)例，網(wǎng)址正常部分是 example.com/demo ，然后在網(wǎng)址hash中存了數(shù)據(jù)keyA=valA和keyB=valB；它們之間用分號(hào)“;”隔開(kāi)，第一個(gè)key名前也有分號(hào)。

如果要用傳統(tǒng)URL傳遞，則是example.com/demo ?keyA=valA&keyB=valB 的樣子。

另外，如果URL本身帶有一段hash，比如存在網(wǎng)頁(yè)本身的錨點(diǎn)書(shū)簽跳轉(zhuǎn)，再儲(chǔ)存數(shù)據(jù)時(shí)則可以是這樣：

其中 index 并不是數(shù)據(jù)，前面帶有分號(hào)的才是數(shù)據(jù)。很容易區(qū)分。

?

怎樣使用 jQuery ? Hash 插件

使用方法非常簡(jiǎn)單。分別有設(shè)置值、增加一對(duì)值，改變值、讀取值，以及刪除值。此外，此插件必須先引入 jQuery ，很好兼容大多的版本。

?

設(shè)置值

只需運(yùn)行

      $.hash( ~keyName, ~value );
    

?

即可設(shè)置一對(duì)值。例如，運(yùn)行$.hash("color", "yellow");即可存儲(chǔ)“color=yellow”到URL的hash里，使URL看起來(lái)像

example.htm #;color=yellow

?

增加值

想要增加一對(duì)值，同樣運(yùn)行設(shè)置值的腳本即可。例如再次運(yùn)行$.hash("fontSize","20px;")，既可新存儲(chǔ)這對(duì)值到hash里，使URL看起來(lái)像

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

?

改變值

同樣運(yùn)行設(shè)置值的腳本，第二個(gè)參數(shù)改為你想要新值即可，這個(gè)操作會(huì)把此對(duì)值移到hash末尾突顯改變。

例如運(yùn)行$.hash("color","green");即可改變hash里已存儲(chǔ)的color的值，使得URL看起來(lái)像

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

?

讀取值

只需運(yùn)行

      $.hash( ~keyName )
    

?

即可讀取名為~keyName的值，例如現(xiàn)在運(yùn)行$.hash("fontSize");則會(huì)返回“20px”。

?

刪除值

要?jiǎng)h除已經(jīng)存儲(chǔ)的一對(duì)值，可以運(yùn)行

      $.hash( ~keyName, null )
    

?

來(lái)刪除它。例如現(xiàn)在運(yùn)行$.hash("color", null);既可刪除hash中已存儲(chǔ)的color=green數(shù)據(jù)，使得URL看起來(lái)像

example.htm #;fontSize=20px

?

jQuery ? Hash 插件 Demo

如果你還不理解或者想要看demo， 按此 。

?

獲得 jQuery ? hash 插件

要引入此插件非常簡(jiǎn)單，你可以 到這里下載此js插件文件 。

然后在至少引入 jQuery 后的某個(gè)位置加入

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

?

?

寫(xiě)在最后

插件下載鏈接在上面。在此要感謝 Lewis ，這個(gè)插件是基于他的 jQuery ? hash plugin修改的。目前不支持中文開(kāi)頭的key名。首先我考慮了一下，hash后面如果出現(xiàn)的是?或者&這些正規(guī)的參數(shù)符號(hào)的話(huà)比較容易和hash井號(hào)前面的參數(shù)混淆，所以我選擇了一個(gè)更美觀的符號(hào)“;”分號(hào)，占用體積小幾乎看不到，但是不影響使用；不會(huì)和前面出現(xiàn)問(wèn)號(hào)和and符號(hào)混淆，而且這個(gè)也不需要兩個(gè)符號(hào)，只需要分號(hào)而已。但如果你需要傳統(tǒng)and符，你可以去原作者網(wǎng)站上下載，或者基于這個(gè)插件自行修改。

謝謝收看。

?

原文： 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