save appended children in electron

Question

So I have a script that appends text boxes and I want to save the text boxes, by this I mean when I reopen the app it will load the text boxes with their value and stuff. I am asking this question because I have searched the answer for 2 days and still can't find anything related to this. Any help will be appreciated!

<body>
  <form class="myformclass" style="font-family: sans-serif;font-size:20px;" id="myForm" onsubmit="return validateForm()">
    <input class="addcommandbtn"type="button" id="addCommand" style="width: 6.5%;" value="+ Command"> 
    <input class="addcommandbtn"type="button" id="removeCommand" style="width: 7.2%;" value="- Command" onclick="removeCommandFunc()"> 
    <input class="addcommandbtn"type="button" id="saveCommands" style="width: 4.2%;" value="Save Commands" onclick="SaveToLocalStorage()">
    <input class="addcommandbtn"type="button" id="loadCommands" style="width: 4.2%;" value="load Commands" onclick="load()">
    <select name="commandslist" id="commandslist" size="18%" style="height: 59%;width: 15%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
  </form>
</body>
<script>
  function showmenu() {
      ipcRenderer.invoke('chooseloc');
  }
  function commadnspage() {
      location.href="./commands.html";
  }
  function homepage(){
      location.href="./index.html";
  }
  function removeCommandFunc() { 
      var d = document.getElementById("commandslist"); 
      d.remove(d.selectedIndex); 
  } 
</script>
<script>
    const { ipcRenderer } = require('electron');

    </script>
<script>
  var commands = []; 
  function createCommandField() {
    var input = document.createElement('option');
    input.style.marginTop = "1%";
    input.textContent = "command";
    input.name = 'Commands[]';
    input.style.display = 'block'
    input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
    input.style.border = '1px solid #dcdcdc';
    input.style.borderRadius = '6px';
    input.style.height = "2%";
    input.style.padding = '5px 30px';
    input.style.fontFamily="Arial";
    input.style.fontWeight="bold";
    input.style.fontSize="17px";
    commands.push(input);
    return input;
  }
  function SaveToLocalStorage(){
    localStorage.setItem('commands', JSON.stringify(commands));
  }
  
  function load(){
      
        document.getElementById('commandslist').appendChild(localStorage.getItem(`commands`, JSON.parse(commands)));     
      
  }  
  
  
  var select = document.getElementById('commandslist');
  document.getElementById('addCommand').addEventListener('click', function (e) {
    select.appendChild(createCommandField());
  });

</script>

can you share your code how you append these text boxes. Also when you use electron than use this as tag — Aalexander, Jan 09 '21 at 17:42
function createCommandField() { var input = document.createElement('option'); input.style.marginTop = "1%"; input.textContent = "command"; input.name = 'Commands[]'; input.style.display = 'block' input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff'; input.style.border = '1px solid #dcdcdc'; input.style.borderRadius = '6px'; input.style.height = "2%"; input.style.padding = '5px 30px'; input.style.fontFamily="Arial"; input.style.fontWeight="bold"; input.style.fontSize="17px"; return input; } — TempAcc, Jan 09 '21 at 17:47
this is my first posts so idk how to make the code more readable — TempAcc, Jan 09 '21 at 17:47
this is a function that is called when someone clicks a button — TempAcc, Jan 09 '21 at 17:48
Add it to your question, click edit than paste it inside mark it and click the symbol of the two curly braces — Aalexander, Jan 09 '21 at 17:48
i will add it here var select = document.getElementById('commandslist'); document.getElementById('addCommand').addEventListener('click', function (e) { select.appendChild(createCommandField()); }); — TempAcc, Jan 09 '21 at 17:55
you can also do a snippet, the symbol next to the braces. So appending works what is the problem here? I dont know what you mean by "storing"? — Aalexander, Jan 09 '21 at 17:57
and start it again i would like to load the last appended text boxes — TempAcc, Jan 09 '21 at 17:59
where do you close it when you restart the app the instructions will be exectuted in the same order and it will still the same result, Or do you append based on user input or something? — Aalexander, Jan 09 '21 at 18:02
when i press a button it will run that function but i want to keep the text boxes after i restart the app — TempAcc, Jan 09 '21 at 18:04
I think you can use localSorage for this https://developer.mozilla.org/de/docs/Web/API/Window/localStorage — Aalexander, Jan 09 '21 at 18:07

Aalexander · Accepted Answer · 2021-01-10T09:13:31.430

1

Solution

You can store your elements in Window.localStorage()

myStorage = localStorage;

function createCommandField() {
  var input = document.createElement('option');
  input.style.marginTop = "1%";
  input.textContent = "command";
  input.name = 'Commands[]';
  input.style.display = 'block'
  input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
  input.style.border = '1px solid #dcdcdc';
  input.style.borderRadius = '6px';
  input.style.height = "2%";
  input.style.padding = '5px 30px';
  input.style.fontFamily = "Arial";
  input.style.fontWeight = "bold";
  input.style.fontSize = "17px";
  return input;
 
}

let select = document.getElementById('bl');
let opt2 = createCommandField();

select.appendChild(opt2);


localStorage.setItem("doc", document.documentElement.innerHTML);

var retrievedObject1 = localStorage.getItem('doc');

console.log(retrievedObject1)

edited Jan 10 '21 at 09:13

answered Jan 09 '21 at 17:51

Aalexander

4,987
3
11
34

it didnt work maybe because i did something wrong coz i want to save every appended children with a save button and load them when i run the program – TempAcc Jan 09 '21 at 18:23
wait lemme try something – TempAcc Jan 09 '21 at 18:23
https://stackoverflow.com/questions/25532489/how-to-store-javascript-html-dom-document-to-locastorageI will update it – Aalexander Jan 09 '21 at 18:33
Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at load (commands.html:303) at HTMLInputElement.onclick (commands.html:255) – TempAcc Jan 09 '21 at 18:39
Have updated the answer in your retrievedObject1 is then the whole page – Aalexander Jan 09 '21 at 18:43
changed the console.log to alert and it shows the whole html script – TempAcc Jan 09 '21 at 18:52
ty so much now its working i used the fs library to re write the script – TempAcc Jan 09 '21 at 18:58
You're welcome :) if you think this was helpful then mark it as accepted the sign below the up/downvote – Aalexander Jan 09 '21 at 18:59
one more question tho how do i use app.getpath to get the .html file – TempAcc Jan 09 '21 at 19:05
in which context? what is app? – Aalexander Jan 09 '21 at 19:17
like when i save the file – TempAcc Jan 09 '21 at 19:43
when i rewrite it i need to specify the path – TempAcc Jan 09 '21 at 19:43
this depends on your system. Unix based I would do something like `let path="~/Documents/Project/" ` – Aalexander Jan 09 '21 at 19:45

save appended children in electron

1 Answers1

Solution