Question

  var container = document.createElement("lastExp");
  container.innerHTML = 'html code new form field';
  document.getElementById("lastExp").appendChild(container);

这是简单的我点击按钮额外的表格字段被添加。问题：当我刷新页面时如何不丢失表单上的这些额外字段。

Answer 1

Stack Overflow不是编写代码的地方，但是如果OP需要的话，这将是这里的。

这是一个最小的例子 - 开始使用localStorage。正如我所提到的，每次加载页面时都必须附加该元素。

这段代码无法在此处运行，遗憾的是因为iframe是沙箱。前往my hub进行实验。

var container = document.getElementById('container'),
    toggle    = document.getElementById('toggle');
    element   = null;

// initial check
init();

// add click event and listen for clicks
toggle.onclick = function() {
  // both cases will update localStoage _inputIsThere
  // if element is null -- doesn't exists, then add it
  if (element == null) {
    add();
  } else {
    // remove the element 
    remove();
  }
}

// check if key exists in localStorage; this is where all the "magic" happens.
function init() {
  var exists = localStorage.getItem('_inputIsThere');
  if (exists && exists == 'true') {
    add();
  }
}


function remove() {
  element.remove();
  element = null;
  // update key in localStorage to false
  localStorage.setItem('_inputIsThere', false);
}

// adds the input and updates 
function add() {

  var e = document.createElement('input');
  e.type = 'text';
  element = e;
  container.appendChild(e);
  // update key in localStorage to true
  localStorage.setItem('_inputIsThere', true);

}

<button id="toggle">Add/Remove</button>
<div id="container"></div>

如何在刷新时保留js添加的额外字段

1 个答案: