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

Question

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

<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));
});

Answer 1

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

例子

localStorage.getItem('userDetails')

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

用你的代码

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

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

更多信息

Documentation setItem() getItem()

Answer 2

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

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>

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

Local Storage isn't storing the value in input field on refresh

html

javascript

json

local-storage

例子

用你的代码

更多信息