Как мне сохранить эти значения в 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 различных значений, которые будут добавлены к сальдо 1 или баланс 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 очищаются, когда страница сессия заканчивается.

---

Попробуйте использовать этот код:

// 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, немедленно вызвать ее в функцию add:

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