将附加的孩子保存在电子中答案

【问题标题】：save appended children in electron将附加的孩子保存在电子中
【发布时间】：2021-01-10 17:13:31
【问题描述】：

所以我有一个附加文本框的脚本，我想保存文本框，我的意思是当我重新打开应用程序时，它会加载文本框及其值和内容。我问这个问题是因为我已经搜索了 2 天的答案，但仍然找不到与此相关的任何内容。任何帮助将不胜感激！

<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>

【问题讨论】：

您能否分享您的代码如何附加这些文本框。此外，当您使用电子而不是使用它作为标签时
函数 createCommandField() { var input = document.createElement('option'); input.style.marginTop = "1%"; input.textContent = "命令"; input.name = '命令[]'; input.style.display = 'block' input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff'; input.style.border = '1px 实心#dcdcdc'; input.style.borderRadius = '6px'; input.style.height = "2%"; input.style.padding = '5px 30px'; input.style.fontFamily="Arial"; input.style.fontWeight="粗体"; input.style.fontSize="17px";返回输入； }
这是我的第一篇文章，所以我知道如何使代码更具可读性
这是一个当有人点击按钮时调用的函数
将其添加到您的问题中，单击编辑而不是将其粘贴到标记它并单击两个大括号的符号

标签： html

【解决方案1】：

解决方案

您可以将您的元素存储在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)

【讨论】：

它不起作用可能是因为我做错了什么，因为我想用保存按钮保存每个附加的孩子，并在我运行程序时加载它们
等我试试看
stackoverflow.com/questions/25532489/… 会更新它
未捕获的语法错误：在 HTMLInputElement.onclick (commands.html:255) 加载 (commands.html:303) 时 JSON.parse () 位置 1 处的 JSON 中出现意外标记 o跨度>
已经更新了你的retrieveedObject1中的答案然后是整个页面