我想將用戶輸入的值保存到本地存儲(chǔ)中，即使在頁(yè)面刷新或完全關(guān)閉瀏覽器后我也希望保留該值。我該怎么做呢？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>我希望即使在頁(yè)面刷新后也能保存所有名稱(chēng)并顯示到標(biāo)簽中。我該怎么做呢？
3 回答
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以使用window.localStorage，它在瀏覽器重新加載后仍然存在。
設(shè)置數(shù)據(jù)：
localStorage.setItem('test',?'value');獲取數(shù)據(jù)：
localStorage.getItem('test');刪除數(shù)據(jù)：
localStorage.removeItem('test');首先，您需要將數(shù)據(jù)加載到namesListfrom?localStorage，然后在提交時(shí)推送到之前保存的數(shù)據(jù)，然后再次保存，加載新數(shù)據(jù)。
另外，為了按預(yù)期工作，您需要JSON.stringify在將其保存到 之前localStorage以及JSON.parse獲取數(shù)據(jù)之后使用。
使用您的代碼，在 jsBin 上運(yùn)行示例：
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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
你可以這樣做。
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貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
你可以試試這個(gè)
// 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 關(guān)注
- 175 瀏覽
添加回答
舉報(bào)
0/150
提交
取消