Strategies for retaining additional fields added via JavaScript when the page is refreshed

Question

Strategies for retaining additional fields added via JavaScript when the page is refreshed

  var newField = document.createElement("lastExp");
  newField.innerHTML = 'insert new form field HTML code here';
  document.getElementById("lastExp").appendChild(newField);

I have a button that adds an additional form field with a simple click. My question is, how can I ensure that these extra fields are not lost when I refresh the page?

javascript

Answer 1

Answer №1

While Stack Overflow is not the ideal platform for writing code, I have included a minimal example here just in case someone other than the OP needs it.

This example focuses on using localStorage and serves as a starting point. It's important to note that you will need to append the element every time the page loads.

Unfortunately, the snippet provided won't work here due to the sandboxing of iframes. You can visit my hub to experiment with it.

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>

Answer 2

While Stack Overflow is not the ideal platform for writing code, I have included a minimal example here just in case someone other than the OP needs it.

This example focuses on using localStorage and serves as a starting point. It's important to note that you will need to append the element every time the page loads.

Unfortunately, the snippet provided won't work here due to the sandboxing of iframes. You can visit my hub to experiment with it.

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>

Strategies for retaining additional fields added via JavaScript when the page is refreshed

Answer №1

Similar questions

Limit the number of elements in an Angular object by using the filter function

Showing dynamic icons in Angular 2 applications

Leverage jQuery/JS to divide a lone <ul> element into four distinct <ul> lists

The function .save() in Mongoose is limited to executing only five times

Activating view loading in AngularJS through child window authentication (OAuth)

Javascript code generated by PHP is failing to run

Leveraging material elements in React applications

Unexpected outcomes experienced with AJAX in ASP.NET due to javascript integration

Enhance the textarea using Javascript when clicked

Maximizing memory efficiency in Javascript through array manipulation strategy

How can I prevent the arrow keys and space bar from causing my webpage to shift downwards?

Create a function that takes advantage of a Promise to resolve its actions

Error: The build process for Next.js using the command `npm run build`

Under what circumstances would you need to manually specify the displayName of a React component?

Ajax is failing to receive the PHP response

"An error has occurred stating that the header is not defined in

Organize unstructured JSON data using a specific method

Storing information in an array based on a specific flag

Creating an array inside a Vue function

Leverage express for proxying websocket connections