如何在 Javascript/HTML 中存储输入值答案

【问题标题】：How to store input values in Javascript/HTML如何在 Javascript/HTML 中存储输入值
【发布时间】：2020-04-19 11:41:01
【问题描述】：

我将如何存储我从这两个输入中作为用户输入的值，以便一起显示为即将到来的“事件”，并能够针对不同的事件在多个不同时间执行此操作？

<label for="eventlocation">Event Location (1 to 20 characters):</label>

<input type="text" id="name" name="name" required minlength="1" maxlength="20" size="20">

<label for="datetime">Event Date and Time:</label>

<input type="datetime-local" id="name" name="name" required minlength="1" maxlength="20" size="20">

【问题讨论】：

标签： javascript java html css

【解决方案1】：

你可以像这样保存和读取数据

const nameTxt = document.querySelector('#name');
const date = document.querySelector('#date');


nameTxt.addEventListener('change', (event) => {
  localStorage.setItem('name', event.target.value);
});

date.addEventListener('change', (event) => {
  localStorage.setItem('date', event.target.value);
});

function getSavedData() {
  console.log('name', localStorage.getItem('name'));
  console.log('date', localStorage.getItem('date'));

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <label for="eventlocation">Event Location (1 to 20 characters):</label>

  <input type="text" id="name" name="name" required minlength="1" maxlength="20"
    size="20">

  <label for="datetime">Event Date and Time:</label>

  <input type="datetime-local" id="date" name="date" required minlength="1"
    maxlength="20" size="20">


  <script src="app.js"></script>
</body>

</html>

【讨论】：