如何在用戶點擊後退按鈕時加載項目？

Question

我有一個應用程序。當用戶點擊「加入購物車」或「保存項目」，它調用適當的URL來保存數據，然後將用戶重定向到正確的頁面：

 if (add_to_cart == true) //If we are adding to cart 
     { 
     $.ajax 
     (
      { 
      //Note: tf_cart.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg($_POST['file'], $_POST['app']); 
      type: "POST", 
      processData: false, 
      url: SITE_URL + "/system/atc/" + app_type + "/0/" + session_id + "/0/?prjid=" + project_id, //send data to this url 
      data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&rid=" + revision_id + "&cid=" + cart_id + "&app=html5" //send these as post variables to the url 
      } 
     ).done(function(msg) //When we get a response from the server after we POST 
     { 
      //console.log("Project added to cart. "); //This is for testing the canvas element on screen - leave this code here 
      window.location = SITE_URL + "/cart/?pid=" + partner_id; //Send the user to the cart page 
     }); 
     } 
     else //If we are saving the project 
     { 
     $.ajax 
     (
      { 
      //Note: xmlproject.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg($_POST['file'], $_POST['app']); 
      type: "POST", 
      processData: false, 
      url: SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id, //send data to this url 
      data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&app=html5&rid=" + revision_id //send these as post variables to the url 
      } 
     ).done(function(msg) //When we get a response from the server after we POST 
     { 
      var parser = new DOMParser(); //create a new DOMParser 
      var doc = parser.parseFromString(msg, "application/xml"); //convert the string to xml 
      pid = doc.getElementsByTagName('pid')[0].childNodes[0].nodeValue; //Get the pid (project id) from the xml 
      rid = doc.getElementsByTagName('rid')[0].childNodes[0].nodeValue; //Get the rid (revision id) from the xml 
      //console.log("Project saved. " + " pid=" + pid + " rid=" + rid); //This is for testing the canvas element on screen - leave this code here 
      window.location = SITE_URL + "/user/mystuff/projects/view/" + pid + "/?pid=" + partner_id; //Send the user to this project's page 
     }); 
     } 

我的問題是，一旦用戶或者是在項目頁面或購物車頁面，他們點擊返回按鈕，它將它們返回給應用程序，並返回一個空白項目。我想要發生的是當他們點擊後退按鈕時，該項目會被加載。

我不知道如何去這個...任何想法？

Answer 1

您可以在幾個不同的方式解決問題：

解決方法一（推薦恕我直言）：隨着更新您的購物車或保存您的項目中，創建購物車/項目pid一個session-cookie。如果用戶返回到應用程序頁面（您的主頁？），請檢查是否存在此會話，然後重新加載或重定向到購物車/項目。

解法（一有點hackish）：而不是將用戶重定向到車的/項目的URL中，他重定向到一箇中間頁。此頁面將再次將用戶重定向（read here），但是這次將重定向到真正的購物車/項目頁面。當用戶按下後退按鈕時，他將返回，然後再次前進到他的購物車/項目頁面。解決方案三：使用onbeforeunload事件來警告用戶並給他機會取消他返回的動作（此事件在用戶卸載頁面時觸發，這不是一個好的解決方案）。

解決方法四：使用HTML5 pushState以操縱用戶的瀏覽器歷史記錄。 Here是一些可能對您有幫助的信息。 （我沒有嘗試過這個我自己，所以我不能保證任何東西）。

解決方法五（混合）：如果您的網站更是一個APP，那麼你應該考慮使用其他的整體架構和工作流程。您可以使用客戶端JavaScript庫進行動態視圖和DOM操作，如Google's AngularJS或Facebook's React。每次需要查看新內容（從主頁面到購物車頁面到項目頁面等）時，不要將客戶端定向到新頁面，因爲這實際上是一個完整的頁面重新加載，並且當客戶端返回歷史記錄時，每頁再次從頭開始重新加載。相反，使用Ajax加載新的內容（例如，像這樣<a href="/cart/?pid">go to cart</a>鏈接應該像<a href="#" onclick="loadCart(pid);">go to cart</a>代替），在JS庫更新頁面，HTML5 pushState改變用戶的歷史狀態。保存客戶的購物車和項目爲session-cookie或localStorage，當客戶端按下「後退」或「前進」按鈕，然後加載並向他顯示適當的內容時，快速獲取此數據。

Answer 2

在我的劇本之初，我檢查cookie的存在，如果它是有我刪除cookie（新會產生，如果他們保存/添加到購物車再次）和重加載頁面Cookie信息：

function common_init() 
{ 
    var cookie = common_get_cookie("project_parameters"); 

    //Send the user back to the project they are working on when they hit the back button - AC 2014-12-04 
    if ("" != cookie) 
    { 
    document.cookie = "project_parameters=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; 
    window.location.href = (SITE_URL + "/Custom_App/?" + cookie); 
    } 
    //more code follows 
} 

，並在保存項目/添加到購物車功能，我說：

document.cookie="project_parameters=app_type" + app_type + "&session_id=" + session_id + "&cart_id=" + cart_id + "&prjid=" + pid + "&rid=" + rid;