Как взять несколько входов из одного и того же поля ввода и сохранить их? - PullRequest
Новая
       13

Как взять несколько входов из одного и того же поля ввода и сохранить их?

0 голосов
/ 30 апреля 2020

В настоящее время я беру информацию о новом событии и сохраняю их в локальном хранилище следующим образом. 

<form name="myform" action="" method="GET">
   Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
   Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
   Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
   Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
   <button onclick="storeValues()" type=submit>Submit</button>
</form>

    <script>
   document.getElementById('input1').value = localStorage.getItem("EventName");
   document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
   document.getElementById('input3').value = localStorage.getItem("EventLocation");
   document.getElementById('input4').value = localStorage.getItem("EventNotes");


function storeValues() {
    localStorage.setItem("EventName", document.getElementById('input1').value);
    localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);
    localStorage.setItem("EventLocation", document.getElementById('input3').value);
    localStorage.setItem("EventNotes", document.getElementById('input4').value);
}
</script>

Но я почти уверен, что когда я беру второй ввод, он перезаписывает его в локальном хранилище. Как бы я изменил его, чтобы я мог использовать эти данные несколько раз?

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Если вы хотите, чтобы они оба были сохранены, вы должны назвать их по-разному.

Что вам, вероятно, нужно, это что-то вроде массива значений в локальном хранилище, которое, если я правильно помню, не работает из коробки? Я действительно не помню, но вы, вероятно, могли бы сериализовать / десериализовать данные этого массива в виде JSON строки.

0 голосов
/ 30 апреля 2020

Я думаю, что вы пытаетесь повторно использовать эту форму для создания нескольких событий и сохранения этих данных в вашем localStorage. Если это так, то вы можете проверить мое решение. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form name="myform" action="" method="GET">
   Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
   Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
   Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
   Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
   <button onclick="storeValues(event)" type=submit>Submit</button>
</form>

    <script>


function storeValues(e) {
    e.preventDefault();
  
    let storedEvents = JSON.parse(localStorage.getItem("Events")) || [];
  
    const newEventDetails = {
      name: document.getElementById('input1').value,
      dateTime: document.getElementById('input2').value,
      location: document.getElementById('input3').value,
      notes: document.getElementById('input4').value
    }
    storedEvents.push(newEventDetails);
    localStorage.setItem("Events", JSON.stringify(storedEvents));
    
    console.log('storedEvents', storedEvents);
    
}
</script>
</body>
</html>
0 голосов
/ 30 апреля 2020

вам нужно будет сохранить массив в хранилище (конечно, вам нужно будет преобразовать массив в массив как строку, а затем проанализировать его для работы с ним.)

Я написал фрагмент, который он даст вам идея. 

<form name="myform" action="" method="GET">
    Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
    Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
    Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
    Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
    <button onclick="storeValues()" type=button>Submit</button>

    <ul id="eventLists">

    </ul>
</form>

<script>

    function loadEvents() {
        let ul = document.getElementById("eventLists");
        ul.innerHTML = "";
        let events = localStorage.getItem("events");
        if (events) {
            try {
                events = JSON.parse(events);
                events.map(e => {
                    ul.innerHTML += `<li>Event named as '${e.name}' dated on '${e.date}' will be held at ${e.location}. (${e.notes})</li>`
                })
            } catch (err) {
                console.log(err);
            }
        }
    }


    loadEvents();

    function storeValues() {
        // getting previous values
        let events = localStorage.getItem("events");


        let newEvent = {
            name: document.getElementById('input1').value,
            date: document.getElementById('input2').value,
            location: document.getElementById('input3').value,
            notes: document.getElementById('input4').value
        }

        try {
            if (events) {
                events = JSON.parse(events);
                events.push(newEvent);
            } else {
                throw Error("no events key here."); // just to take us to the catch block
            }
        } catch (err) {
            events = [newEvent];
        } finally {
            // save into storage
            localStorage.setItem("events", JSON.stringify(events));
            loadEvents();
        }
    }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...