How to increment value in localstorage on button click?

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); 
};

Show us what you tried so far. But just to give you a basic idea: `load value => parse value => increment value => save value`. — cyr_x, Mar 05 '18 at 20:39
It doesn't seem as though you've actively researched this. You're stating that you know how to store it, so looking up how to retrieve that value is the only missing piece, and in this case that piece is actually top answer in google and intuitive. Please attempt this first. — zfrisch, Mar 05 '18 at 20:41
It is not a matter of retrieving it. I am aware of that. I want to update the value of the stored item on button click, not get the item from localstorage — jsnoobie, Mar 05 '18 at 20:45
https://stackoverflow.com/questions/26839774/incrementing-a-counter-when-a-button-is-clicked-javascript-html — justDan, Mar 05 '18 at 20:46
https://codepen.io/anon/pen/WMqrqe This is my current codepen where I can store the values from the slider in localstorage. I want the localstorage value to be incremented on button click, thus it will change and I can use this new value elsewhere. — jsnoobie, Mar 05 '18 at 20:47
@DanielD the issue with that is that I want to update the value stored in localstorage by a defined number directly into localstorage. the counter function wouldn't work — jsnoobie, Mar 05 '18 at 20:51

th3n3wguy · Answer 1 · 2018-03-05T20:58:00.410

0

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.

edited Mar 05 '18 at 20:58

answered Mar 05 '18 at 20:50

th3n3wguy

3,649
2
23
30

Hello! I don't think this is in line with what I meant, sorry if it wasn't clear. I have no trouble storing the value in localstorage..where I am stumped is incrementing the value in local storage on button click using a function where I can specify by how much I want to increment the value. So if the localstorage value is 10 and I click on increment, I want it to increase to 15 directly in localstorage – jsnoobie Mar 05 '18 at 20:53
@jsnoobie => I updated my answer based on your comment. Let me know if this fixes your issue. – th3n3wguy Mar 05 '18 at 20:58

score 0 · Answer 2 · answered Mar 05 '18 at 21:02

0

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); 
};

answered Mar 05 '18 at 21:02

Adebimpe Adebowale

36
3

Thanks for the update! I tried running this but my console.log gave me 'NAN'. I used exactly what you had put :( – jsnoobie Mar 05 '18 at 21:09
Also when I checked on another page where I output the localstorage value, this showed on my html: function (e,t){return z(this,w.prop,e,t,arguments.length>1)} – jsnoobie Mar 05 '18 at 21:12

How to increment value in localstorage on button click?

2 Answers2