jquery追加历史记录返回浏览器后丢失

Question

我有一个表单，当单击按钮时，会 append 新的输入。提交时一切正常，但如果我点击后退浏览器，所有 append 字段都会丢失..

点击此浏览器按钮时有办法维护它们吗？

谢谢!

Answer 1

您的 append 元素仅存在于 DOM 中，任何浏览器都不会缓存该元素。

建议您使用cookies来解决这个问题，查看https://github.com/carhartl/jquery-cookie

向此类 cookie 添加一些内容

$.cookie("row", "a new row or whatever");

// or preferably a json
var myJsonRow = {
   row: 1,
   value: "Test"
}
$.cookie("row", JSON.stringify(myJsonRow));

要读取这个非常简单的cookie，只需使用

$.cookie("row");

现在显然您需要比这更高级的东西，但这可以在 json 对象中处理。

首先创建一个您觉得舒服的 json 模式，如下所示

// Basic row-pattern
var cookieRows = {
   rows: [
      {
         value: "row 1",
         type: "radio"
      },
      {
         value: "row 2",
         type: "text"
      },
      {
         value: "row 3",
         type: "password"
      },
   ]
}

并实现

$(document).ready(function(){
   // Test if the cookie is set
   if(!$.cookie("rows")) {

      var cookieRows = {
         rows: []
      }

      // Register the pattern
      $.cookie("rows", JSON.stringify(cookieRows));
   }

   // Adding rows

   // Register your event handler
   $("#control").click(function(){

      // Get the control element
      var controlElement = $(this);

      // Fetch the needed information and create a row
      var cookieRow = {
         value: controlElement.val(),
         type: controlElement.attr('type')
      }

      // Get the cookie
      var cookieRows = JSON.parse($.cookie("rows"));

      // Add the value to the cookie
      cookieRows.rows.push(cookieRow);

      // And save the cookie
      $.cookie("rows", JSON.stringify(cookieRows));
   });
});

嗯，你明白了!