Question

当用户在输入元素中输入文本时，我希望能够保存他们键入的内容，以便在刷新时仍将其缓存。

const input = document.getElementById('input')
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key)
  input.value = localStorage.getItem("key");
};

Answer 1

只需将值分配给事件处理函数之外的输入元素：

const input = document.getElementById('input')
input.value = localStorage.getItem("key"); // get and assign the value outside 
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key);
};

请注意：您也可以考虑使用 oninput 代替 onchange 。

Answer 2

像这样的事情，只是添加一个加载事件侦听器，该侦听器可以设置localStorage的输入值，或者如果localStorage中什么都没有，则设置默认值？

const input = document.getElementById('input')
input.onchange = function(){
    const value = input.value;
    localStorage.setItem('key', value);
};

document.addEventListener('load', ()=> {
    input.value = localStorage.getItem('key') || '';
})

Answer 3

<body onload="reloadData()">
 <!-- your html here -->
</body>
<script>
    const input = document.getElementById('input')
    input.onchange = function(){
        const value = input.value;
        localStorage.setItem('key', value);
    };
    function reloadData() {
        input.value = localStorage.getItem('key') || ''
    }
</script>

reloadData函数将在页面加载时被调用。这将随您需要。

Answer 4

在页面顶部，添加以下window.onload语句：

VerificationActivity.onCreate()

Answer 5

首先，将值保存到每次更改的本地存储中。然后，在页面重新加载时，使用localStorage.getItem()。

var input = document.getElementById("myinput") // Get my input

function restore(){
  var lst = localStorage.getItem("inputdata") // Get your data from local storage
  
  if(lst === null || lst === undefined){
    return; // return if the user has not visited this site/input
  }
  
  input.value = lst; // Sets the value of the input to the restore data
  
  return;
}

restore()

function save(event_data){
  localStorage.setItem("inputdata",input.value) // Save the value in localStorage
}

input.addEventListener("change",save);

Input Something Here <input id="myinput">

这可行，但是我建议为此使用cookieStorage。

使用localstorage重新加载页面时，如何更新输入值？

5 个答案: