save and load input value with javascript or json-CodePudding

hello please help me find a solution: there are 3 inputs and the user can write whatever answer he wants in them; and there is a "SAVE" Button that takes the values in the inputs and makes the user download them into a file.txt; and then when he presses the "choose file" button he can load the input values in the txt file in the same inputs like it's been written right away (meaning reload every answer in its input)

Nb: the saved file can be in any format not exactly ["111","222","333"]

function save_func() {
  var quest1 = document.getElementById("Question1").value;
  var quest2 = document.getElementById("Question2").value;
  var quest3 = document.getElementById("Question3").value;
  var data = [];
  data.push(quest1);
  data.push(quest2);
  data.push(quest3);
  var data_string = JSON.stringify(data);
  var file = new Blob([data_string], {
    type: "text"
  });
  var anchor = document.createElement("a");
  anchor.href = URL.createObjectURL(file);
  anchor.download = "MyProject.txt";
  anchor.click();
}

function load_func() {
  var file = document.getElementById("load").files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    var load = JSON.parse(reader.result)[0];
    document.getElementById("inputs").value = load;
  };
  reader.readAsText(file);
}

<form id="inputs">
  <label for="Question1">Question 1</label>
  <br />
  <input type="text" id="Question1"  name="Question1name" /><br />
  <br />
  <label for="Question2">Question 2</label>
  <br />
  <input type="text" id="Question2"  name="Question2name" /><br />
  <br />
  <label for="Question3">Question 3</label>
  <br />
  <input type="text" id="Question3"  name="Question3name" /><br />
  <br />
  <button onclick="save_func()">Save</button> And To Load A Project <input id="load" type="file" value="load" onchange="load_func()">
</form>

CodePudding user response：

It looks like the only issue with your code is that you are not actually loading the file back into any of the inputs on your page. Your load_func function is trying to set the value of an input with the id of "inputs" which is a form, not an input. So you just need to load your values back into "Question1", "Question2", and "Question3".

function save_func() {
  var quest1 = document.getElementById("Question1").value;
  var quest2 = document.getElementById("Question2").value;
  var quest3 = document.getElementById("Question3").value;
  var data = [];
  data.push(quest1);
  data.push(quest2);
  data.push(quest3);
  var data_string = JSON.stringify(data);
  var file = new Blob([data_string], {
    type: "text"
  });
  var anchor = document.createElement("a");
  anchor.href = URL.createObjectURL(file);
  anchor.download = "MyProject.txt";
  anchor.click();
}

function load_func() {
  var file = document.getElementById("load").files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    var load = JSON.parse(reader.result);
    document.getElementById("Question1").value = load[0];
    document.getElementById("Question2").value = load[1];
    document.getElementById("Question3").value = load[2];
  };
  reader.readAsText(file);
}

<label for="Question1">Question 1</label>
<br />
<input type="text" id="Question1"  name="Question1name" /><br />
<br />
<label for="Question2">Question 2</label>
<br />
<input type="text" id="Question2"  name="Question2name" /><br />
<br />
<label for="Question3">Question 3</label>
<br />
<input type="text" id="Question3"  name="Question3name" /><br />
<br />
<button onclick="save_func()">Save</button> And To Load A Project <input id="load" type="file" value="load" onchange="load_func()">

EDIT

Below is a code snippet that is designed to work with any number of inputs/fields. Any input that has a class of input-box will be saved and consequently loaded. The code snippet above still works based on OP's example, but the code below would probably work better for most real-world applicaitons.

const _Save = () => {
  let data = [];
  document.querySelectorAll(".input-box").forEach(el => {
    data = [...data, el.value];
  });

  let file = new Blob([JSON.stringify(data)], {
    type: "text"
  });

  let a = document.createElement("a");
  a.href = URL.createObjectURL(file);
  a.download = "SavedData.txt";
  a.click();
}

document.querySelector("#load").addEventListener("change", e => {
  let reader = new FileReader();
  reader.onloadend = () => {
    let data = JSON.parse(reader.result);
    document.querySelectorAll(".input-box").forEach((el, i) => {
      el.value = data[i];
    });
  };
  reader.readAsText(e.target.files[0]);
});

<label for="Question1">Question 1</label>
<br />
<input type="text" id="Question1"  name="Question1name" /><br />
<br />
<label for="Question2">Question 2</label>
<br />
<input type="text" id="Question2"  name="Question2name" /><br />
<br />
<label for="Question3">Question 3</label>
<br />
<input type="text" id="Question3"  name="Question3name" /><br />
<br />
<button onclick="_Save()">Save</button> And To Load A Project <input id="load" type="file" value="load">