如何在用户点击后退按钮时加载项目？

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;