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

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。如果用户返回应用程序页面（您的主页？）检查此会话是否存在，然后重新加载或重定向到购物车/项目。

解决方案二（有点骇人听闻）：不是将用户重定向到购物车/项目的网址，而是将他重定向到中间页面。此页面将再次重定向用户 (read here)，但这次是到真正的购物车/项目页面。当用户按下后退按钮时，他会后退然后前进，再次回到他的购物车/项目页面。

解决方案三：使用onbeforeunload 事件警告用户并让他有机会取消返回操作（只要用户卸载页面，此事件就会触发，恕我直言，这不是一个好的解决方案）。

解决方案四：使用 HTML5 pushState 来操纵用户的浏览器历史记录。 Here 是一些可能对您有所帮助的信息。 （我自己没有试过，所以我不能保证）。

解决方案五（混合）：如果您的网站更像是一个应用程序，那么您应该考虑使用完全其他的架构和工作流程。您可以使用客户端 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;