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

Question

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

function save() {

    document.getElementsByClassName("field").each(function(formField){
        formdata[this.id] = this.value;
        document.getElementById("input"+this.id).value=this.value;
    });
    localStorage.setItem("formdata", JSON.stringify(formdata));
    console.log(localStorage.getItem('formdata'));
    document.getElementById("getinput").style.display = "none";

}

, но это не сработало, и я могу использовать некоторую помощь.

это ввод и отображение td:

<table style="width: 50%" align="center" cellpadding="5" cellspacing="5">
    <tr>
        <th>Date</th>
        <th>Time</th>
        <th>Title</th>
        <th>Check</th>
    </tr>
    <tr>
        <td id="inputDate">&nbsp;</td>
        <td id="inputTime">&nbsp;</td>
        <td id="inputTitle">&nbsp;</td>
        <td style="text-align:center"><input name="Checkbox1" type="checkbox" /></td>
    </tr>
</table>

<div id="getinput">
    <table style="width:100%;" align="center" cellpadding="5" cellspacing="5">
        <tr>
            <td style="border:none">Date:</td>
            <td style="border:none"><input class="field" id="Date" name="Text1" type="date"></td>
        </tr>
        <tr>
            <td style="border:none">Time:</td>
            <td style="border:none"><input class="field" id="Time" name="Text1" type="time"></td>
        </tr>
        <tr>
            <td style="border:none">Title:</td>
            <td style="border:none"><input class="field" id="Title" name="Text1" type="text" placeholder="Meeting details"></td>
        </tr>
        <tr style="text-align:center">
            <td style="border:none" colspan="2"><input name="btc" type="button" value="Cancel" onclick="cancel()">
            &nbsp;&nbsp; <input name="bts" type="button" value="Save" onclick="save()"></td>
        </tr>
    </table>

</div>

Answer 1

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

Это делается путем проверки:

function doesSupportStorage(){
  return (typeof(Storage) !== "undefined");
}

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

if (doesSupportStorage()){

  // Store item
  localStorage.setItem("key", "value");

  // Load item and show in console
  console.log(localStorage.getItem("key")

  // Remove item
  localStorage.removeItem("key");
}

Примечание. Доступ к хранилищу браузера можно получить с помощью localStorage или window.localStorage.

Если вы не можете использовать localStorage, есть и другие способы хранения, такие как:

• PersistJS: https://github.com/jeremydurham/persist-js
• globalstorage: имейте в виду, что это устарело и используется в старых браузерах.
• атрибут данных: вы можете хранить информацию внутри строки JSON как часть атрибута данных
• печенье

Answer 2

each является допустимой функцией, а getElementsByClassName () возвращает HTMLCollection , которая не поддерживает forEach.

Мы также можем использовать Array.from для преобразования коллекции HTMLC в массив и использования forEach в списке.

Array.from(document.getElementsByClassName("filed")).forEach(...

или использование для цикла while.

for (let i = 0; i < elements.length; i++) {...}

function save() {

var els = document.getElementsByClassName("field");
const formdata = {};

[].forEach.call(els, function (el) {
    
    formdata[el.id] = el.value;
    document.getElementById("input" + el.id).value= el.value;
});

if(typeof Storage !== "undefined") {
  alert('No localStorage support');
  return;
}

localStorage.setItem("formdata", JSON.stringify(formdata));
console.log(localStorage.getItem('formdata'));
}

<table style="width: 50%" align="center" cellpadding="5" cellspacing="5">
    <tr>
        <th>Date</th>
        <th>Time</th>
        <th>Title</th>
        <th>Check</th>
    </tr>
    <tr>
        <td id="inputDate">&nbsp;</td>
        <td id="inputTime">&nbsp;</td>
        <td id="inputTitle">&nbsp;</td>
        <td style="text-align:center"><input name="Checkbox1" type="checkbox" /></td>
    </tr>
</table>

<div id="getinput">
    <table style="width:100%;" align="center" cellpadding="5" cellspacing="5">
        <tr>
            <td style="border:none">Date:</td>
            <td style="border:none"><input class="field" id="Date" name="Text1" type="date"></td>
        </tr>
        <tr>
            <td style="border:none">Time:</td>
            <td style="border:none"><input class="field" id="Time" name="Text1" type="time"></td>
        </tr>
        <tr>
            <td style="border:none">Title:</td>
            <td style="border:none"><input class="field" id="Title" name="Text1" type="text" placeholder="Meeting details"></td>
        </tr>
        <tr style="text-align:center">
            <td style="border:none" colspan="2"><input name="btc" type="button" value="Cancel" onclick="cancel()">
            &nbsp;&nbsp; <input name="bts" type="button" value="Save" onclick="save()"></td>
        </tr>
    </table>