如何在单击按钮时增加本地存储中的值？

Question

In one screen of my web app, a user has entered a numerical value which is stored in the localstorage. In the next screen the user can click a button where the localstorage value will be incremented by a value once; lets say add 5. So if the localstorage of the variable X is 5 on button click it will be updated to 10.

How do I go about this? I have the value stored but I don't know how to manipulate the value on button click.

codepen with my current localstorage implemented using a range slider as input.

https://codepen.io/anon/pen/WMqrqe

var updateValuesMinutes = function(){
$to.prop("value", to);
localStorage.setItem( 'StoreMinutes', to); 
let localMinutes = localStorage.getItem("StoreMinutes"); 
console.log(localMinutes); 
};

Answer 1

You're only missing 1 line of code to get this working:

var updateValuesMinutes = function(valueToIncrementBy){
  $to.prop("value", to);
  localStorage.setItem( 'StoreMinutes', to); 
  let localMinutes = localStorage.getItem("StoreMinutes"); 
  console.log(localMinutes); 
  // This is what you're missing.

  localStorage.setItem('StoreMinutes', !isNaN(parseInt(localMinutes)) ? parseInt(localMinutes) + valueToIncrementBy : valueToIncrementBy);
};

You can then call this function to increment the value like this:

updateValuesMinutes(5); // This will update the localStorage value by 5 more than it already is.

Answer 2

Local storage values are usually stored as a string and therefore need to be converted to a number before they can be incremented.

localStorage.setItem( 'StoreMinutes', to); 
//convert string to integer
let localMinutes = parseInt(localStorage.getItem("StoreMinutes")); 
localStorage.setItem('localMinutes', localMinutes++)
console.log(localMinutes); 
};