页面刷新后如何保值？

Question

I managed to get the number go up after pressing each button, but I need the value to stay after refreshing the page. I understand I could use localStorage , but I do not understand how it works.

<form>
  <input type="text" id="number" value="0" />
  <input type="button" onclick="incrementValue10()" value="$10" />
  <input type="button" onclick="incrementValue20()" value="$20" />
  <input type="button" onclick="incrementValue50()" value="$50" />
</form>

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

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

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

Answer 1

To use localStorage you simply need to call setItem() to save a value and getItem to retrieve it.

It's also worth noting that you should not be using onX attributes. They are bad practice. Use unobtrusive event handlers instead. Also, you can easily DRY the code up by attaching a single function to all elements and varying its action by a data attribute on each one. Something like this:

let output = document.querySelector('#number');

// save the value on click of the button
document.querySelectorAll('.inc').forEach((el) => {
  el.addEventListener('click', function() {
    var newValue = parseFloat(output.value) + parseFloat(this.dataset.inc);
    output.value = newValue;
    localStorage.setItem('number', newValue);
  });
});

// retrieve the value when the page loads
var oldValue = localStorage.getItem('number') || 0;
output.value = oldValue;

<form>
  <input type="text" id="number" value="0" />
  <input type="button" class="inc" data-inc="10" value="$10" />
  <input type="button" class="inc" data-inc="20" value="$20" />
  <input type="button" class="inc" data-inc="50" value="$50" />
</form>

Note that SO snippets block access to localStorage, so here's a fully working jsFiddle

Answer 2

You can use localstorage for this:

 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)

 }

Answer 3

As per the code, you are just storing the values in memory(heap). When page is re-loaded browser just allocates new memory and you can't retain the previous values. So store the values in some persistence like client side(localstorage, sssionstorage and Index DB) if it is entirely related to the particular client's UI state, servr side Databases like SQL, NoSQL, RDBMS.

Refer this link for basic understanding of client side storage.

https://www.w3schools.com/html/html5_webstorage.asp