本地存储不存储值，当我刷新时它会清除内存[重复]

Question

我正在尝试将 oninput 事件侦听器值存储在 Web 浏览器的本地存储中。例如：如果我在表单输入字段中输入内容，它应该存储在本地存储中，当我刷新页面时它应该仍然存在。我阅读了几个博客并观看了有关本地存储的教程并做了同样的事情，但它对我不起作用。谁能指出错误，我该如何解决？

提前致谢！

<form class="form" action="https://formspree.io/f/meqvlgqr" method="POST">
    <input
      type="text"
      name="name"
      maxlength="30"
      placeholder="Full Name"
      required
      class="input"
    />
    <input
      type="email"
      name="email"
      placeholder="example@gmail.com"
      required
      class="input"
    />
    <textarea
      rows="4"
      cols="50"
      name="message"
      placeholder="Write your message here ..."
      required
      maxlength="500"
      class="input-textarea"
    ></textarea>
    <button type="submit" class="contact-button">Get It Touch</button>
  </form>

oninput 值显示在控制台选项卡中的检查器工具上，但是当我转到应用程序选项卡并检查存储时，它显示了 JSON 对象，但其值为空。

const storeName = document.querySelector('input[type=text]');
const storeEmail = document.querySelector('input[type=email]');
const storeMessage = document.querySelector('.input-textarea');
const userDetails = { name: '', email: '', message: '' };

storeName.addEventListener('input', (e) => {
  userDetails.name = e.target.value;
  console.log(userDetails.name);
});

localStorage.setItem('userDetails', JSON.stringify(userDetails));

Answer 1

您必须将本地存储 setItem 操作放在输入事件侦听器中

 const storeName = document.querySelector('input[type=text]');
 const storeEmail = document.querySelector('input[type=email]');
 const storeMessage = document.querySelector('.input-textarea');
 const userDetails = { name: '', email: '', message: '' };
 
 storeName.addEventListener('input', (e) => {
   userDetails.name = e.target.value;
   console.log(userDetails.name);
   localStorage.setItem('userDetails',JSON.stringify(userDetails));
 });

或者为了优化性能，把它放在表单提交事件监听器中

document.querySelector('.form').addEventListener('submit',function(evt){
  evt.preventDefault();
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
})