时间戳

首页 > 解决方案 > 如何组合和存储这些值

javascript - 如何组合和存储这些值

问题描述

我有一个提醒应用程序，它在本地存储东西，我已经让它分别存储每个问题。我需要做什么才能将所有 3 个部分作为 1 个项目存储在本地存储中以便更容易检索？另外，我需要添加什么才能在不覆盖已存储内容的情况下存储多个内容？

<div class="container">
    <!-- The above form looks like this -->

    <div class="row">
        <div class="six columns" style="margin-top: 20%">
            <form id="todoForm">
                <label for="ReminderInput">Reminder</label>
                <input class="u-full-width" type="text" id="ReminderInput">


                <label for="DateInput">Date</label>
                <input class="u-full-width" type="datetime-local" id="DateInput">


                <label for="InfoInput">Additional Information</label>
                <textarea class="u-full-width" type="text" placeholder="Remember to..." id="InfoInput"></textarea>
                <button type="button" id="btn" class="button-primary">Add Reminder</button>
            </form>
        </div>
    </div>
</div>


 let reminders = [];

 const addReminders = (ev) => {
 ev.preventDefault(); 
let reminder = {
ReminderInput: document.getElementById('ReminderInput').value,
DateInput: document.getElementById('DateInput').value,
InfoInput: document.getElementById('InfoInput').value

}
localStorage.setItem('ReminderInput', JSON.stringify(reminder.ReminderInput));
localStorage.setItem('DateInput', JSON.stringify(reminder.DateInput));
localStorage.setItem('InfoInput', JSON.stringify(reminder.InfoInput));

}

 document.addEventListener('DOMContentLoaded', () => {
 document.getElementById('btn').addEventListener('click', addReminders);
 });

标签： javascriptlocal-storage

解决方案

要将对象作为单个项目存储在本地存储中，您可以使用JSON.stringify将对象编码为字符串，稍后检索对象时，您需要记住使用JSON.parse将字符串转换回对象。

为了存储多个而不覆盖任何内容，您需要某种类型的累加器，它也可以在本地存储中，以便您可以为每个值生成一个新键，例如“reminder1”、“reminder2”等。只是不要每次存储新密钥时忘记增加累加器。然后，您可以稍后迭代累加器的 1 -> 当前值以检索所有存储的对象。

推荐阅读