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

Question

大家好，我正在开发这个应用程序，其中一个按钮有 3 个状态

first状态，这是网页第一次打开时的默认状态

图片1:-

然后当你点击它时，它会变成另一个图像，并设置一个计时器。

图二：-

当计时器结束时，它会再次变为另一幅图像。

图3：-

然后当你再次点击它时，它会变成带有绿色轮廓的图片 nr 2 并再次启动计时器，

我使用本地存储来确保我保存了计时器和图片，但我的问题是当我刷新页面时我返回到图片编号 1，在这里我希望它记住它是什么“状态”在，如果它被点击一次我需要它刷新，请记住我应该像图 2 一样是“绿色”并等待计时器结束并像图 3 一样变成“红色”，如果计时器结束并且像图3一样是红色的我也需要它记住！

我真的迷路了，对这一切都是陌生的，所以我希望得到帮助，也许还有例子..

提前致谢:( :O

这是我的 html 按钮代码：

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

这是我的 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

本地存储在页面刷新后仍然存在。您不需要后端服务器，可以使用 JS 完成。有一个设置内容面板的方法

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

在您的 $(document).ready 检查中，本地存储是否包含您需要的那些值 (localStorage.getItem())。如果它确实通过了那些如果没有通过初始设置

Answer 2

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 3

这是我现在的代码，它仍然刷新我的 foreach 循环中的其他行

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

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

problems with local storage and onClick on page refresh

javascript

asp.net

onclick