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

我有一份申请。当用户单击“添加到购物车”或“保存项目”时，它会调用相应的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
        });
      }

我遇到的问题是，一旦用户在项目页面或购物车页面，他们点击后退按钮，它就会将他们返回到应用程序，并返回一个空白项目。我想发生的是，当他们点击后退按钮时，项目就会加载

---

我不知道该怎么办。。。有什么想法吗？

你可以用几种不同的方法解决你的问题：

imho推荐的解决方案一：在更新购物车或保存项目的同时，使用购物车/项目pid创建一个项目。如果用户返回应用程序页面，则返回主页？检查此会话是否存在，然后重新加载或重定向到购物车/项目

解决方案二有点老套：不是将用户重定向到购物车/项目的url，而是将用户重定向到中间页面。此页面将再次重定向用户，但这次将重定向到真正的购物车/项目页面。当用户按下后退按钮时，他将返回，然后再前进，再次进入购物车/项目页面

解决方案三：使用事件来警告用户，并给他取消返回操作的机会。每当用户卸载页面时，此事件就会触发，这不是一个好的解决方案

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

---

P>解决方案五：混合：如果你的网站是一个应用程序，那么你应该考虑使用整个其他的体系结构和工作流。您可以使用客户端javascript库进行动态视图和DOM操作，如或。不要每次客户端需要看到从主页到购物车页面再到项目页面的新内容时都将其指向新页面，因为这实际上是一个完整的页面重新加载，当客户端返回历史记录时，每个页面都会重新加载。相反，使用Ajax加载新内容，例如，这样的链接应该替换为js库来更新页面，使用HTML5来更改用户的历史状态。将客户端的购物车和项目另存为或，以便在客户端按下“后退”或“前进”按钮时快速获取此数据，然后加载并向其显示相应的内容。

在脚本开头，我检查是否存在cookie，如果存在cookie，我将删除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; 

---

可能是对历史进行了一些操作，以便您能够以某种方式引用要加载的项目？此时，您可能需要查看一个框架。主干网很容易应用于现有的项目，如果您使用它，您就可以立即获得所需的功能。但是，如果用户刷新页面，仍然会发生这种情况。那你就是索尔，无论你选择什么。您可能也需要本地存储解决方案。