添加后不会删除输入字段数据答案

【问题标题】：Input field data not deleted once add添加后不会删除输入字段数据
【发布时间】：2022-11-23 16:13:41
【问题描述】：

我有一个包含 cakephp3 和 JS 的表单。我有一个问题，如何将数据存储到输入字段中？这个任务有一些条件，如果一旦用户在输入字段中添加输入，这些数据将不会被删除，如果页面被某人加载或关闭浏览器并再次返回该页面，用户将在输入字段中获得相同的数据他打字，但是当他提交表单时，只有数据会从表单中删除。任何可能的解决方案。

【问题讨论】：

也许在用户提交数据之前将 input.value 存储在 localStorage 上？然后删除localstorage，然后将输入字段数据重置为空字符串？
是的，类似的东西。
但是我们应该监听什么事件呢？我假设您只有 1 个用于发布表单的提交按钮？否则，您将需要第二个按钮将数据保存到本地存储。否则，我无法想出一种仅通过用户输入并什么都不按的方式将数据存储在本地存储中的方法。
我正在尝试当输入字段上的用户 keyup 或 keydown 然后数据直接提交，当他们提交表单时它将删除并且表单再次变得新鲜

标签： javascript cakephp-3.0

【解决方案1】：

如cmets中所述，您可以通过以下方式处理；

将输入值保存到本地存储
将您的输入值设置为本地存储中的任何值

提交后清除本地存储

// Get the input field var input = document.getElementById("myInput"); let submit = document.getElementById('submit');

// Execute a function when the user presses a key on the keyboard
input.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
   e.preventDefault(); 
   localStorage.setItem('Name', JSON.stringify(input.value))
   populateUI();
  }
});

//Update local Storage
function populateUI(){
    if (localStorage.getItem("Name") !== null) {
      input.value = JSON.parse(localStorage.getItem('Name'))
    //...
    }
    
}

submit.addEventListener('click', () => {
   localStorage.clear();
   input.value = ''
}, false)

populateUI();

【讨论】：