时间戳

首页 > 解决方案 > 如何在 Javascript/HTML 中存储输入值

javascript - 如何在 Javascript/HTML 中存储输入值

问题描述

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

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

标签： javascriptjavahtmlcss

解决方案

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

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>

推荐阅读