我想將用戶輸入的值保存到本地存儲中，即使在頁面刷新或完全關閉瀏覽器后我也希望保留該值。我該怎么做呢？allNames = []function submit() { var names = document.getElementById("names").value; allNames.push(names); localStorage.setItem("names", names)}document.getElementById("namesList").innerHTML = allNames<input id="names" placeholder="Enter Your Party's names"><button onclick="submit()">Submit</button><div id="namesList"></div>我希望即使在頁面刷新后也能保存所有名稱并顯示到標簽中。我該怎么做呢？
3 回答
一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
您可以使用window.localStorage，它在瀏覽器重新加載后仍然存在。
設置數據：
localStorage.setItem('test',?'value');獲取數據：
localStorage.getItem('test');刪除數據：
localStorage.removeItem('test');首先，您需要將數據加載到namesListfrom?localStorage，然后在提交時推送到之前保存的數據，然后再次保存，加載新數據。
另外，為了按預期工作，您需要JSON.stringify在將其保存到 之前localStorage以及JSON.parse獲取數據之后使用。
使用您的代碼，在 jsBin 上運行示例：
function submit() {
? var names = document.getElementById("names").value;
? var allNames = JSON.parse(localStorage.getItem("allNames")) || [];
? allNames.push(names);
? localStorage.setItem("allNames", JSON.stringify(allNames));
? document.getElementById("names").value = '';
? document.getElementById("namesList").innerHTML = localStorage.getItem("allNames");
}
document.getElementById("namesList").innerHTML = localStorage.getItem("allNames");
<input id="names" placeholder="Enter Your Party's names">
<button onclick="submit()">Submit</button>
<div id="namesList"></div>
守候你守候我
TA貢獻1802條經驗 獲得超10個贊
你可以這樣做。
allNames = localStorage.getItem("names");
if (allNames) allNames = allNames.split(';;;');
document.getElementById("namesList").innerHTML = allNames
function submit() {
var partnerName = document.getElementById("names").value;
allNames.push(names);
localStorage.setItem("namesList", allNames.join(';;;'));
document.getElementById("namesList").innerHTML = allNames;
}
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
你可以試試這個
// Store data
var someData = 'The data that I want to store for later.';
localStorage.setItem('myDataKey', someData);
// Get data
var data = localStorage.getItem('myDataKey');
// Remove data
localStorage.removeItem('myDatakey');
文檔
https://developer.mozilla.org/pt-BR/docs/Web/API/Storage/setItem
- 3 回答
- 0 關注
- 163 瀏覽
添加回答
舉報
0/150
提交
取消