我正在嘗試制作一個在用戶按下按鈕時保存資料的表單。
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<button type="button" onclick="SaveData()">Save Data</button>
<button type="button" onclick="LoadData()">Load Data</button>
</form>
這是我的嘗試。當我嘗試加載資料時，它只是空白。
var name = document.getElementById("name").value;
function SaveData() {
localStorage.setItem("name", name);
}
function LoadData() {
var data = localStorage.getItem("name");
alert(data);
}
uj5u.com熱心網友回復：
您需要檢查#name函式內部的值。
function SaveData() {
var name = document.getElementById("name").value;
localStorage.setItem("name", name);
}
uj5u.com熱心網友回復：
<form onsubmit="onSave()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<input type="submit" value="Save Data" />
<button type="button" onclick="LoadData()">Load Data</button>
</form>
function onSave(event){
const { currentTarget } = event;
const data = new FormData(currentTarget)
Array.from(data.entries()).forEach(function([key, value]) {
window.localStorage.setItem(key, value);
})
}
或者
<form id="form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<button type="button" onclick="SaveData()">Save Data</button>
<button type="button" onclick="LoadData()">Load Data</button>
</form>
const form = document.getElementById("form")
function onSave(event){
const data = new FormData(form)
Array.from(data.entries()).forEach(function([key, value]) {
window.localStorage.setItem(key, value);
})
}
檢查這個以獲取更多資訊
uj5u.com熱心網友回復：
請注意，name設定在外面saveData()并且永遠不會更新。因此，無論何時saveData()被呼叫，它總是存盤 的原始值name，它（因為表單輸入沒有默認值）是空字串。因此，更準確地說它正在加載默認值，而不是空白值。
要存盤輸入的當前值，您需要name在每次saveData()呼叫之前更新或直接在saveData(). 由于有多個輸入，您需要為每個輸入執行此操作。一個簡單的解決方案是將形式傳遞到saveData()和具有它檢查每個的形式輸入：
function saveData(form) {
for (elt of form.elements) {
if (elt.id || elt.name) {
localStorage.setItem(elt.id || elt.name, elt.value);
}
}
}
“保存”表單按鈕將更新為：
<button type="button" onclick="SaveData(this.form)">Save Data</button>
您可以LoadData()對“加載”按鈕進行類似的更改。
除了從onclick屬性呼叫資料保存和加載函式之外，您還可以使用addEventListener（它具有某些優點，如鏈接的 MDN 檔案和SO 上的“ addEventListener vs onclick ”中所述），盡管傳遞表單將是處理方式不同。
uj5u.com熱心網友回復：
一種可行的方法是同時使用FormData和JSON.stringify以便將所有表單的活動資料一次存盤在單個表單相關/特定鍵下。
// local storage mock due to SO blocking
// built-in `localStorage` by privacy settings.
const localStorage = {
storage: new Map,
setItem(key, value) {
this.storage.set(key, value);
},
getItem(key) {
return this.storage.get(key) ?? null;
}
};
function saveData(evt) {
evt.preventDefault();
const elmForm = evt.currentTarget;
const storageKey = elmForm.dataset.storableForm;
const activeData = Object.fromEntries(
Array.from(
new FormData(elmForm).entries()
)
);
localStorage.setItem(
storageKey,
JSON.stringify(activeData)
);
// debug logging.
console.log({
[storageKey]: localStorage.getItem(storageKey)
});
}
function loadData(evt) {
const elmForm = evt.currentTarget.form;
const storageKey = elmForm.dataset.storableForm;
const storageData = JSON.parse(
localStorage.getItem(storageKey)
);
Object
.entries(storageData ?? {})
.forEach(([key, value]) => {
elmForm.elements[key].value = value;
});
// debug logging.
console.log({ storageData });
}
document
.querySelectorAll('[data-storable-form]')
.forEach(elmNode => {
elmNode
.addEventListener('submit', saveData);
elmNode
.querySelector('[data-load]')
.addEventListener('click', loadData);
});body { margin: 0; zoom: .95; }
.as-console-wrapper { min-height: 85%!important; }<form data-storable-form="form-data-A">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<button type="submit">Save Data</button>
<button type="reset" onclick="console.clear();">Clear Data</button>
<button type="button" data-load>Load Data</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/346237.html
標籤：javascript html 形式 本地存储