Question

我有一个Web应用程序，每当用户按下“输入”时，都会在页面上添加一个新的输入框。我希望在用户单击保存按钮时保存每个输入框的值。因此，当用户单击“保存”按钮时，所有文本将在刷新后保存。到目前为止，输入框的所有位置均已正确保存。所有输入框都将子级附加到“ main”元素上。

let main = document.getElementById('main');
let ls=window.localStorage;
function saveToLS(e) {
    ls.setItem("content", main.innerHTML);
    for(let i = 0; i < main.children; i++){
        ls.setItem(`inputBox${i}`, main.children[i].value);
    }
}

function loadElements(e) {
    if(ls) {
        main.innerHTML = ls.getItem("content");
        for(let i = 0; i < main.children.length; i++) {
              main.children[i].addEventListener("keydown", inputKeyClick);
              main.children[i].value = ls.getItem(`inputBox${i}`);
        }
    }    
}

Answer 1

每按一次enter键，您都应获取本地存储，解析JSON并再次存储。

假设这是您的inputKeyClick：

function inputKeyClick(event) {
    if(event.keyCode === 13){
        [...main.children].forEach((item, index) => {
          localStorage.setItem(`inputBox${index}`, item.value)
      })
   }
}

这只是一个想法，可以根据您的需要进行改进

如何将多个输入框的值保存到本地存储中？

1 个答案: