problems with local storage and onClick on page refresh

hello guys i am woking on this app where there are 3 states on a button

first state, this is the default when the web page is openend for the first time

Picture 1:-

enter image description here

then when you click it, it changes to another image, and sets a timer.

Picture 2:-

enter image description here

when the timer is over it changes again to another image.

Picture 3:-

enter image description here

then when u click it again it is changing to picture nr 2 with green outline and start timer again,

I use local storage to make sure I save the timer and the pictures, but my problem is when I refresh the page I turns back to picture number 1, here I would like it to remember what “state” it was in, if it was clicked once I need it to on refresh, remember that I should be “green” like on picture 2 and wait for the timer to end and turn “red” like on picture 3, and if the timer was out and it was red like on picture 3 I need it to remember that also!

I’m REALLY lost, and all new to this, so I hoping for help, maybe and example..

thanks in advance 🙁 :O

here a my html button code:

 <img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" />

and here is my javascript:

<script>

$(document).ready(function () {


 function aktivereSkift(
 initImagePath = null,
 initNextImagePath = null,
 count = 15
 ) {


 if (initImagePath === null || initNextImagePath === null) {
    return false;
}
$(this).attr("src", initImagePath);

let timer = count * 1000;
let counter = setInterval(timerLS.bind(this, count), 1000);

function timerLS() {
    count = count - 1;

    localStorage.setItem("counter", count); 

    



    if (count <= 0) {    
         
        clearInterval(counter);
        return;
        
        
        
    }
}
     setTimeout(() => $(this).attr("src", initNextImagePath), timer);

    localStorage.setItem("nextimagepath", initNextImagePath);

     localStorage.setItem("imagepath", initImagePath);



    }



function loadDefaultValues() {
const initImagePath = localStorage.getItem("imagepath");
const initNextImagePath = localStorage.getItem("nextimagepath");
const counter = localStorage.getItem("counter");

aktivereSkift(initImagePath, initNextImagePath, counter);
    }

  

 loadDefaultValues();

 $(".toilet").on("click", function () {
 aktivereSkift.call(this, '/lib/pictures/toiletBegyndt.png', '/lib/pictures/toiletSlut.png');

 });

 });

 </script>

Answer

HTML:

<img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" data-id="1"/>
<img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" data-id="2"/>
<img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" data-id="3"/>

JS:

<script>
 $(document).ready(function() {

var objects = JSON.parse(localStorage.getItem("objects") || "[]");
objects.forEach(function(object, index) {
    if (localStorage.getItem("counter " + object.id) > 0) {
      aktivereSkift(object.imagePath, object.nextImagePath, object.id, localStorage.getItem("counter " + object.id), true);
    } else if (localStorage.getItem("counter " + object.id) == 0) {
      aktivereSkift(object.imagePath, object.nextImagePath, object.id, localStorage.getItem("counter " + object.id), true);
    } else {
      loadDefaultValues();
    }
});

function aktivereSkift(initImagePath = null, initNextImagePath = null, id = 0, count = 15, isRefresh = false) {
  
  if (initImagePath === null || initNextImagePath === null) {
    return false;
  }

  
  isRefresh ? $('.toilet[data-id="'+ id +'"]').attr("src", initImagePath) : $(this).attr("src", initImagePath);

  let timer = count * 1000;

  let counter = setInterval(timerLS.bind(this, count), 1000);
  
  var objects = JSON.parse(localStorage.getItem("objects") || "[]");
  
  var obj = {id: id, imagePath: initImagePath, nextImagePath: initNextImagePath }
  
  const i = objects.findIndex(item => item.id === id);
  if (i > -1) objects[i] = obj; 
  else objects.push(obj);
  

  localStorage.setItem("objects", JSON.stringify(objects)); 

  function timerLS() {
    count = count - 1;
    
     localStorage.setItem("counter " + id, count < 0 ? 0 : count);

    if (count <= 0) {
      clearInterval(counter);
      return;
    }
  }

  setTimeout(() => isRefresh ? $('.toilet[data-id="'+ id +'"]').attr("src", initNextImagePath) : $(this).attr("src", initNextImagePath), timer);
  
}



function loadDefaultValues() {
  const initImagePath = localStorage.getItem("imagepath");
  const initNextImagePath = localStorage.getItem("nextimagepath");
  const counter = localStorage.getItem("counter");

  aktivereSkift(initImagePath, initNextImagePath, counter);
}



$(".toilet").on("click", function() {
  aktivereSkift.call(this, '/lib/pictures/toiletBegyndt.png', '/lib/pictures/toiletSlut.png', $(this).attr("data-id"));
});
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *