时间戳

首页 > 解决方案 > 无法从本地存储中获取要显示的所有信息

javascript - 无法从本地存储中获取要显示的所有信息

问题描述

这应该是一个带有输入和输出页面的提醒列表。我目前将表单信息保存在本地存储中，但仅显示最近添加的项目。如何制作它以显示存储中的所有内容？
Ps 我稍后会做一个按钮来删除该项目。

输入页面 HTML

<form name="todoForm" action="" method="get">
    Reminder : <input type="text" name="ReminderInput" id="ReminderInput"><br />
    Date: <input type="datetime-local" name="DateInput" id="DateInput"><br />
    Extra Information : <input type="text" name="InfoInput" id="InfoInput"><br />
    <button onclick="storeValues(event)" type=submit>Submit</button>
</form>

输入页面JS

function storeValues(e) {
e.preventDefault();
let storedReminders = JSON.parse(localStorage.getItem("Reminders")) || [];
const newReminderDetails = {
    ReminderInput: document.getElementById('ReminderInput').value,
    DateInput: document.getElementById('DateInput').value,
    InfoInput: document.getElementById('InfoInput').value
}
storedReminders.push(newReminderDetails);
localStorage.setItem("Reminders", JSON.stringify(storedReminders));
console.log('storedReminders', storedReminders);    
}
document.getElementById("todoForm").addEventListener("submit",storeValues );

输出页面 HTML

<h1>Reminders
</h1>
<h4 id='ReminderInput'>&nbsp;</h4>
<h4 id='DateInput'>&nbsp;</h4>
<h4 id='InfoInput'>&nbsp;</h4>

输出页面JS

const renderReminder = (reminder) => {
        document.getElementById('ReminderInput').textContent = reminder.ReminderInput;
        document.getElementById('DateInput').textContent = reminder.DateInput;
        document.getElementById('InfoInput').textContent = reminder.InfoInput;
    };
    renderReminder
    const storedReminders = JSON.parse(localStorage.getItem("Reminders"));
    if (!storedReminders) throw new Error('No Reminders');
    const lastReminder = storedReminders.pop();
    renderReminder(lastReminder);

标签： javascripthtml

解决方案

推荐阅读