国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

location.hash保存頁面狀態的技巧_javascript技巧

來源:懂視網 責編:小采 時間:2020-11-27 21:49:45
文檔

location.hash保存頁面狀態的技巧_javascript技巧

location.hash保存頁面狀態的技巧_javascript技巧:hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。 語法 location.hash 在我們的項目中,有大量ajax查詢表單+結果列表的頁面,由于查詢結果是ajax返回的,當用戶點擊列表的某一項進入詳情頁之后,再點擊瀏覽器回退按鈕返回
推薦度:
導讀location.hash保存頁面狀態的技巧_javascript技巧:hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。 語法 location.hash 在我們的項目中,有大量ajax查詢表單+結果列表的頁面,由于查詢結果是ajax返回的,當用戶點擊列表的某一項進入詳情頁之后,再點擊瀏覽器回退按鈕返回
hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。

語法

location.hash

在我們的項目中,有大量ajax查詢表單+結果列表的頁面,由于查詢結果是ajax返回的,當用戶點擊列表的某一項進入詳情頁之后,再點擊瀏覽器回退按鈕返回ajax查詢頁面,這時大家都知道查詢頁面的表單和結果都回到了默認狀態。

如果每次返回頁面都要重新輸入查詢條件,或有甚者還得轉到列表的第幾頁,那這種體驗用戶真的要抓狂了。

在我們的項目中,寫了一個很簡單的JavaScript基類來處理location.hash從而保存頁面狀態,今天在此就分享給大家。

(本文的內容可能對于JavaScript初學者來講有點難度,因為涉及到JS面向對象的知識,如定義類、繼承、虛方法、反射等)

先看看我們的需求

我們的項目是一個基于微信的H5任務管理系統,要完成的頁面原型如下圖所示:

需求應該都很清晰,就是點擊查詢表單,用ajax返回查詢結果,然后點擊列表中的某一個任務進入任務詳情頁。由于管理員(項目經理)通常會一次處理多個任務,所以就會不斷在任務詳情頁跟查詢列表頁切換,這時如果按返回鍵不能保存查詢頁面狀態的話,那每次返回查詢頁面都要重新輸入查詢條件,這樣的體驗肯定是不能忍受的。

所以,我們需要想辦法將頁面狀態保存下來,以便用戶按回退鍵的時候,查詢條件和結果都還在。

解決思路

保存頁面狀態的思路有很多啦,但是我們覺得用location.hash應該是最好的方法。

思路如下:

1.用戶輸入查詢條件并點擊確定后,我們將查詢條件序列化成一個字符串,并通過“#”將查詢條件加到url后面得到一個新的url,然后調用location.replace(新的url)修改瀏覽器地址欄中的地址。

2.當用戶按回退鍵回退到查詢頁面時,也可以說是頁面加載時,將location.hash反序列化成查詢條件,然后將查詢條件更新到查詢表單并執行查詢即可。

思路很簡單,關鍵的地方就是location.replace方法,這個方法不僅僅是修改瀏覽器中地址欄的url,更重要的是會在window.history中替換當前頁面的記錄。如果不用location.replace方法,那么每次回退都會回退到上一個查詢條件。當然,這樣的需求可能對某些項目還有用。

最終解決方案

如果本文只是分享上面的解決思路,那價值就不大了。本文的價值應該是我們寫的那個雖然簡單但是卻很強大的JavaScript類。

如果你看明白了上面的解決思路,那就看看這個簡單的JavaScript類吧:

這個類只有2個方法,HashQuery.parseFromLocation() 方法從location.hash反序列化為HashQuery子類的實例,HashQuery.updateLocation() 方法將當前HashQuery子類的實例序列化并更新到window.location。

可以看到HashQuery這個類沒有任何屬性,那是因為我們只定義了一個基類,類的屬性都在子類中進行定義。這也是符合實際的,因為查詢條件都只有在具體的頁面才知道有哪些屬性。

另外,請注意這里的序列化和反序列化。這里的序列化僅僅是利用JavaScript反射機制將實例的所有字符串屬性(按順序)的值用“|”分隔;而序列化則是將字符串用“|”分隔后,再利用反射更新到實例的屬性(按順序)。

如何使用HashQuery類

使用的時候就非常簡單了。

第一步,定義一個子類,將需要用到的查詢條件都加到字符串屬性當中,如我們的代碼:

第二步,在查詢頁面調用HashQuery.parseFromLocation() 和 HashQuery.updateLocation()方法即可。下面的代碼是我們完整的查詢頁面:

總結

這就是我們項目中使用location.hash來保存頁面狀態的全部知識了。不知道大家的WEB項目中是如何處理這樣的需求的呢?

以上內容是小編給大家介紹的location.hash保存頁面狀態的技巧,希望對大家有所幫助!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

location.hash保存頁面狀態的技巧_javascript技巧

location.hash保存頁面狀態的技巧_javascript技巧:hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。 語法 location.hash 在我們的項目中,有大量ajax查詢表單+結果列表的頁面,由于查詢結果是ajax返回的,當用戶點擊列表的某一項進入詳情頁之后,再點擊瀏覽器回退按鈕返回
推薦度:
標簽: js loca 的javascript
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产精品99久久 | 在线色站 | 在线观看视频一区二区三区 | 亚洲精品影院久久久久久 | 免费看黄视频网站 | 91精品国产色综合久久 | 国产高清一区二区三区视频 | 99久久精品国产亚洲 | 国产高清视频 | 欧美亚洲一二三区 | 91在线一区二区 | 精品视频在线观看视频免费视频 | 久久中文字幕久久久久91 | 美国一级大黄大色毛片视频一 | 欧美另类图片亚洲偷 | 91日韩欧美| 国产淫视频 | 亚洲精国产一区二区三区 | 中文字幕久久久久一区 | 日韩欧美一区二区三区在线播放 | 欧美一级成人影院免费的 | 亚洲欧洲中文字幕 | 殴美aⅴ| 97热久久免费频精品99国产成人 | 可以看的毛片 | 国产精品国产三级国产普通话一 | 青草青99久久99九九99九九九 | 亚洲欧美在线免费观看 | 久久精品一区二区三区四区 | 欧美 日韩 国产 成人 在线观看 | 高清亚洲 | 日韩欧美在线观看成人 | 久久亚洲欧美综合激情一区 | 成人毛片一区二区三区 | 91香蕉福利一区二区三区 | 亚洲第一页中文字幕 | 欧美日韩高清一区二区三区 | 99国产精品高清一区二区二区 | 制服丝袜先锋影音 | 国产视频欧美 | 欧美亚洲另类视频 |