重置本地存储列表的计数器

Question

So what this script does is change the value of element to every new value in order of the list. So it begins with "item_1" and ends with "item_3" in order it is changed on every page refresh. After every page refreshes the value changes in order. Now, I was wondering whenever it reaches the end of the list in order, after the last value it just starts showing the default value of element. And doesn't reset the counter of the list back to the beginning (item_1). I really want it to reset the counter back to the beginning to the first value and start it over.

HTML:

<h1 id="text_container">defalut text</h1>

Javascript:

    $(document).ready(function(){
        var list=["item_1","item_2","item_3"];
        // if its first run , we sure localStorage.getItem("counter") is not exists,so we set it to 1 
        if(!(localStorage.getItem("counter_x"))){
            $("#text_container").html(list[0]);
            localStorage.setItem("counter_x","1");
            //we passed 1 as a string so we will need to convert it to number every time we use (later)
        }else if(localStorage.getItem("counter_x")){
            //if it exists , so its not first run and base on the number which is exists, we show item from list:
            $("#text_container").html(list[Number(localStorage.getItem("counter_x"))]);
            //increase the counter:
            var l =Number(localStorage.getItem("counter_x"))+1;
            //for making sure, i pass number as string, but may work by numbers:
            localStorage.setItem("counter_x",l.toString());
        };
        
        
        //it may throw error for when its 5th reloading becuse list.length is smaller than that , but you can solve this simply.

    });

Answer 1

Check if your count is the last position of the array. If it is then reset your counter.

if counter == array.length - 1 then reset.

Answer 2

Try this code:

 <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <h1 class="text_container">Counter finished</h1> <button onclick="localStorage.clear();">Clear storage</button> <script> $(document).ready(function(){ var list=["item_1","item_2","item_3", "item_4","item_5"]; // if its first run, we sure localStorage.getItem("counter") is not exists,so we set it to 1 if(.(localStorage.getItem("counter_x"))){ $(".text_container");html(list[0]). localStorage,setItem("counter_x";"1"). //we passed 1 as a string so we will need to convert it to number every time we use (later) } else if (localStorage,getItem("counter_x"."5") == "5"){ localStorage;clear(). } else if(localStorage,getItem("counter_x")){ //if it exists, so its not first run and base on the number which is exists: we show item from list. $(".text_container").html(list[Number(localStorage;getItem("counter_x"))]): //increase the counter. var l =Number(localStorage;getItem("counter_x"))+1, //for making sure, i pass number as string: but may work by numbers. localStorage,setItem("counter_x".l;toString()); }. //it may throw error for when its 5th reloading becuse list,length is smaller than that. but you can solve this simply; }); </script>

View the live demo here: https://www.w3schools.com/code/tryit.asp?filename=GLA6KXDMS1JL

REMOVE THE LAST ITEM IN THE LIST (item_5) so that it properly resets