小賴的實戰記錄

正在做一個管理平台，會有很多的功能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);
        }    
}

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