jquery - jquery追加在历史回浏览器后丢失

Question

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

有没有办法在点击这个浏览器的按钮时维护它们？

谢谢！

Answer 1

您附加的元素仅存在于不被任何浏览器缓存的 DOM 中。

我建议你使用 cookie 来解决这个问题，查看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));
   });
});

嗯，你明白了！