JavaScript - 記錄搜尋條件,下一頁後返回載入搜尋條件,記錄目前所在位置

JavaScript - 記錄搜尋條件,下一頁後返回載入搜尋條件,記錄目前所在位置

正在做一個管理平台,會有很多的功能Menu、頁籤、搜尋條件,

每當搜尋結果,得到列表,便會進入下一頁編輯,但編輯返回時,又變成從第一個功能、第一個頁籤、及原本搜尋條件也被清空了,

此時,如果用後端程式去寫Session,又會把後端程式寫的很複雜,

所以我考慮用前端處理

 

這時,我使用,每當搜尋時,就將現在的搜尋條件,整個記錄下來(包括在哪個功能、頁籤、搜尋條件、頁碼)

返回時,判斷原本記錄的搜尋條件,再次展現原本有的畫面,

而且當下次重新進入系統,也不會載入搜尋結果,只有返回時才會載入搜尋結果,

而下次重新進入系統,只會錨點在該功能、該頁籤上,不會特別記錄搜尋條件。

 

這些功能使用JavaScript的功能有

 history.replaceState、localStorage、history.state,這三個語法就可以解決以上問題

在搜尋時,則將目前頁面記錄記錄搜尋條件

history.replaceState(SearchData,Title,URL);

及記錄目前功能頁面

localStorage.MainPage = MainPage;

localStorageTab = Tab;

再次返回主畫面時則判斷

if(history.state!=null){
       SearchData = history.state;
       MainPage= SearchData .MainPage;
       Tab= SearchData.Tab;
       Page = SearchData .Page
       showPageTab(MainPage,Tab,Page );
} else {
       MainPage= localStorage.MainPage;
       Tab= localStorage.Tab;
                
        if(MainPage!=undefined) {
             showPageTab(MainPage,Tab,1);
        } else {
             showPageTab('Index','Tab1',1);
        }    
}

這樣,編輯、返回、新增、返回,下次進入等,流程會變得很順暢,不用再重複按功能頁面、頁籤、點選頁面、輸入文字等。