如何将用户输入保存在本地存储中？

Question

我正在尝试将来自 3 种不同类型的用户输入保存到本地存储并在 td 中显示它们。 我怎样才能做到这一点？ 这就是我试图做的：

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()返回一个不支持 forEach 的HTMLCollection 。

我们还可以使用Array.from将 HTMLCollection 转换为数组并在列表中使用 forEach。

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

或者使用 for, 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>