如何将这些值存储在 localStorage 中？

Question

我正在组建一个非常简单的系统，使计数变得简单。 重新加载页面后，我需要将这些值保留在 HTML 中，我只是还没有学会如何操作localStorage API 。

这是我的代码结构的不言自明且简化的可执行示例版本：

 var total = window.document.getElementById('total') var debit = window.document.getElementById('debit') var credit = window.document.getElementById('credit') var somatotal = 0 var somadebit = 0 var somacredit = 0 var valX = window.document.getElementById('valX') var valY = window.document.getElementById('valY') var valZ = window.document.getElementById('valZ') var somavalX = 0 var somavalY = 0 var somavalZ = 0 function addX() { var txtval = window.document.getElementById('txt-valX') var val = Number(txtval.value) var totalres = somatotal += val var totalval = somacredit += val total.innerText = totalres.toFixed(2) credit.innerText = totalval.toFixed(2) var valWay = somavalX += val valX.innerText = valWay.toFixed(2) } function addY() { var txtval = window.document.getElementById('txt-valY') var val = Number(txtval.value) var totalres = somatotal += val var totalval = somadebit += val total.innerText = totalres.toFixed(2) debit.innerText = totalval.toFixed(2) var valWay = somavalY += val valY.innerText = valWay.toFixed(2) } function addZ() { var txtval = window.document.getElementById('txt-valZ') var val = Number(txtval.value) var totalres = somatotal += val var totalval = somadebit += val total.innerText = totalres.toFixed(2) debit.innerText = totalval.toFixed(2) var valWay = somaY += val valY.innerText = valWay.toFixed(2) }

 Balance 1:<div id="debit">0.00</div> Balance 2<div id="credit">0.00</div> TOTAL:<div id="total">0.00</div> <br><br> Value X:<div id="valX">0.00</div> <input type="number" id="txt-valX" placeholder="vai add ao saldo 2"> <button onclick="addX()" id="bt0">OK</button><br> Value Y:<div id="valY">0.00</div> <input type="number" id="txt-valY" placeholder="vai add ao saldo 1"> <button onclick="addY()" id="bt1">OK</button><br> Value Z:<div id="valZ">0.00</div> <input type="number" id="txt-valZ" placeholder="vai add ao saldo 1"> <button onclick="addZ()" id="bt1">OK</button>

如您所见，我有3 个不同的值将添加到balance 1或balance 2中，它们显示在 HTML 中。 每个值也加在一起，总和也显示在 HTML 中。 现在我需要在重新启动页面时不会丢失这些值，以便可以继续从以前的方式开始进行计算。

你能帮助我吗？ 我提前表示感谢。

Answer 1

要将项目保存在 localStorage 中，您必须使用下一个合成器：

localStorage.setItem('key','value')

要读取项目并将其保存到变量中：

const variable = localStorage.getItem('key') // Remember it will be always an string

去除：

localStorage.removeItem('key')

最后清除所有项目：

localStorage.clear()

您也可以使用 sessionStorage，不同之处在于 localStorage 中的数据不会过期，而 sessionStorage 中的数据会在页面 session 结束时被清除。

---

尝试使用此代码：

// This part of the code render the localStorage values to HTML. If no value is stored so it just put a zero
total.innerHTML = Number(localStorage.getItem('total'))
debit.innerHTML = Number(localStorage.getItem('debit'))
credit.innerHTML = Number(localStorage.getItem('credit'))
valX.value = Number(localStorage.getItem('valX'))
valY.value = Number(localStorage.getItem('valY'))
valZ.value = Number(localStorage.getItem('valZ'))

// This function saves the texbox values to localStorage, and its called on every click. Please call this function on each click.
const saveValuesToLocalStorage => () {
    localStorage.setItem('total',total.textContent)
    localStorage.setItem('debit',debit.textContent)
    localStorage.setItem('credit',credit.textContent)
    localStorage.setItem('valX',valX.value)
    localStorage.setItem('valY',valY.value)
    localStorage.setItem('valZ',valZ.value)
}

例如，要调用将值保存到 localStorage 的 function，请在添加 function 中立即调用它：

function addX() {
    saveValuesToLocalStorage()
...

Answer 2

您可以使用 localStorage API，特别是使用setItem(key,value)和getItem(key,value)方法：

const myObj = {
  value1: 1,
}

// Set the items.  You can either do one key with the the value being an object that contains all of your values, or save each value under its own key.
localStorage.setItem('myUniqueKey',JSON.stringify(myObj));

// Later when you want to reload on refresh
localStorage.getItem('myUniqueKey');

更多信息可以在这里找到： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage