页面刷新时本地存储和 onClick 出现问题

Question

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:-

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

Picture 2:-

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

Picture 3:-

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 1

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>

Answer 2

Local storage survives page refresh. you don't need a backend server for this, it can be done using JS . Have a method that sets up the content panel

function loadContent(state){
// get state as parameter and show buttons accordingly
}

on your $(document).ready check is local storage holds those values ( localStorage.getItem() ) that you need. if it does pass those if not pass initial setting

Answer 3

this i the code i have now, and it still refreshes other rows in my foreach loop

 @foreach (var item in Model)
    {







        <tr>

            <td>
                <img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.billede))" style="width:150px;height:150px; border-radius:15px;" />

            </td>



            <td>


                <div>


                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

                    <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" />






                </div>

            </td>

            <td>

                <div>
                    <a href="#" data-toggle="Behov" data-placement="bottom" title="Behov" data-content="@Html.DisplayFor(modelItem => item.behov)"><input type="image" src="~/lib/pictures/behov.png" style="height:150px;width:150px" /></a>
                </div>


            </td>

            <td>

                <div>
                    <a href="#" data-toggle="Sove" data-placement="bottom" title="Søvnbehov" data-content="@Html.DisplayFor(modelItem => item.sove)"><input type="image" src="~/lib/pictures/sove.png" style="height:150px;width:150px" /></a>
                </div>


            </td>

            <td>


                <div>
                    <a href="#" data-toggle="Div" data-placement="bottom" title="Diverse" data-content="@Html.DisplayFor(modelItem => item.div)"><input type="image" src="~/lib/pictures/diverse.png" style="height:150px;width:150px" /></a>
                </div>


            </td>

            <td>
                <div>
                    <a asp-action="Edit" asp-route-id="@item.Id"><input type="image" src="~/lib/pictures/Redigere.png" style="height:150px;width:150px" /></a>

                </div>
            </td>

            <td>
                <div>

                    <a asp-action="Delete" asp-route-id="@item.Id"><input type="image" src="~/lib/pictures/slet.png" style="height:150px;width:150px" /></a>


                </div>
            </td>

        </tr>

        <tr><td colspan="7"><h2><center>@Html.DisplayFor(modelItem => item.navn)</center></h2></td></tr>













    }

</tbody>

@section scripts
                {


<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>