本地存储不会在刷新时将值存储在输入字段中答案

【问题标题】：Local Storage isn't storing the value in input field on refresh本地存储不会在刷新时将值存储在输入字段中
【发布时间】：2021-10-05 20:22:45
【问题描述】：

我正在尝试将值保存在网络浏览器的本地存储中。例如：当我在表单输入字段中键入内容并且刷新页面时未提交表单时。价值观应该在那里。但是此时，当我刷新页面时，值消失了。让我告诉你我是如何做到这一点的。

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

我正在尝试 storeName.value = localStorage.getItem 让值保留在那里，但它不起作用。

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

storeName.addEventListener('input', (e) => {
  userDetails.name = e.target.value;
  console.log(userDetails.name);
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
  storeName.value = localStorage.getItem(JSON.parse(userDetails));
});

【问题讨论】：

标签： javascript html json local-storage

【解决方案1】：

首先，您以错误的方式提取价值。应该是这样的。

const storedUserDetails = JSON.parse(localStorage.getItem('userDetails'));

为了在刷新后填充值，只要我知道您将不得不使用 IIFE（立即调用函数表达式），因为输入事件在用户开始输入或更改输入内容之前不会触发。

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

(() => {
  const storedUserDetails = JSON.parse(localStorage.getItem('userDetails'));
    const {name}= storedUserDetails
  
  if(name) {
     storeName.value = name
  }
})()

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

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

【讨论】：

【解决方案2】：

您已在 localStorage 中设置了 userDetails 键，因此您必须读取该值。

示例

localStorage.getItem('userDetails')

然后就可以解析得到的值了。

使用您的代码

storeName.value = JSON.parse(localStorage.getItem('userDetails'))

您可以在页面加载时执行相同操作以获取保存的输入数据。

示例

使用您的代码

更多信息