Javascript 如何在页面刷新后保留值？

在按下每个按钮后，我都设法使数字上升，但我需要在刷新页面后保留该值。我知道我可以使用

localStorage

，但我不知道它是如何工作的

函数递增值10（）{
var value=parseInt（document.getElementById（'number'）。值，10）；
值=isNaN（值）？0：值；
数值+=10；
document.getElementById（'number'）。value=value；
}
函数增量值20（）{
var value=parseInt（document.getElementById（'number'）。值，10）；
值=isNaN（值）？0：值；
数值+=20；
document.getElementById（'number'）。value=value；
}
函数增量值50（）{
var value=parseInt（document.getElementById（'number'）。值，10）；
值=isNaN（值）？0：值；
数值+=50；
document.getElementById（'number'）。value=value；
}

根据代码，您只是将值存储在内存（堆）中。重新加载页面时，浏览器只分配新内存，不能保留以前的值。因此，如果值完全与特定客户机的UI状态、服务器端数据库（如SQL、NoSQL、RDBMS）相关，则将值存储在一些持久性中，如客户机端（localstorage、sssionstorage和IndexDB）

有关客户端存储的基本了解，请参阅此链接

---

要使用localStorage，只需调用

setItem（）

保存值，然后调用

getItem

检索值

还值得注意的是，您不应该使用

onX

属性。这是坏习惯。改用不引人注目的事件处理程序。此外，通过将单个函数附加到所有元素并通过每个元素上的

data

属性改变其操作，您可以轻松地使代码变干。大概是这样的：

let output=document.querySelector（'#number'）；
//单击按钮保存值
document.queryselectoral（'.inc'）.forEach（（el）=>{
el.addEventListener（'click'，函数（）{
var newValue=parseFloat（output.value）+parseFloat（this.dataset.inc）；
output.value=newValue；
setItem（'number'，newValue）；
});
});
//在页面加载时检索值
var oldValue=localStorage.getItem（'number'）| | 0；
output.value=旧值；

---

请注意，由于代码段会阻止对localStorage的访问，因此这里有一个完全有效的

，您可以使用localStorage进行此操作：

 if(localStorage.getItem('number') != ""){
    document.getElementById('number').value = localStorage.getItem('number');
 }

 function incrementValue10()
 {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value+=10;
    document.getElementById('number').value = value;
    localStorage.setItem('number', document.getElementById('number').value)

}
function incrementValue20()
{
  var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
   value+=20;
   document.getElementById('number').value = value;
   localStorage.setItem('number', document.getElementById('number').value)

}
function incrementValue50()
{
   var value = parseInt(document.getElementById('number').value, 10);
   value = isNaN(value) ? 0 : value;
   value+=50;
   document.getElementById('number').value = value;
   localStorage.setItem('number', document.getElementById('number').value)

 }

---

决定你想用哪种语言。我打赌你不会想要所有的4个。你有没有试着通过阅读文档和查看示例等来了解localStorage。？如果是这样的话，请加上，你到底不明白哪一部分。它是有效的！！天哪，非常感谢你帮我保存作业谢谢！！没问题，很高兴帮助你嗨！我刚刚意识到，在将文件更改为php后，我的值不会保留。。。我该怎么办…？这很有效！！天哪，非常感谢你帮我保存作业谢谢！！