[英]how can I save user input in local storage?
我正在嘗試將來自 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"> </td>
<td id="inputTime"> </td>
<td id="inputTitle"> </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()">
<input name="bts" type="button" value="Save" onclick="save()"></td>
</tr>
</table>
</div>
嗯...首先,我們需要檢查瀏覽器是否支持瀏覽器支持。
這是通過檢查來完成的:
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,還有其他存儲方式,例如:
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"> </td> <td id="inputTime"> </td> <td id="inputTitle"> </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()"> <input name="bts" type="button" value="Save" onclick="save()"></td> </tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.