突出显示新项目，直到刷新或下次访问 LocalStorage

Question

My task: show newly added and never seen items (by user's browser) in bold And on next visit or page refresh remove the bolding from the items that have already been viewed (until reset button has been clicked).

So far i was only been able to do it with.click toggle, but can not figure out how to make it with any other method. I Couldn't find a solution for this anywhere on inte.net either.

I'm using jquery and LocalStogage throughout the site and would like to stick to it here as well, if possible.

The closest i found to my theme is Detect newly inserted element in the document but it refers to things like MutationObserver that might not be required (as i use unique ID's for each element) and is also bit above my understanding. This thread is all about cookies, using which i'd like to avoid: How to highlight new items on the site since last visit with jquery?

Here's a codepen with working.click toggle event that i'm trying to convert for my task: https://codepen.io/asdanguss/pen/yLqXZBG

<div id="id00001" class="classer viewed">ITEM 1</div><br><br>
<div id="id00002" class="classer viewed">ITEM 2</div><br><br>
<div id="id00003" class="classer viewed">ITEM 3</div><br><br>
<div id="id00004" class="classer viewed">ITEM 4</div><br><br>
<div id="id00005" class="classer viewed">ITEM 5</div><br><br>
<center><button class="reseter" onClick="refreshPage()">Reset</button></center>

body {background: black;}
.classer {position: absolute; padding: 5px; background: #323232; width: 50%; left:25%; color: white; font-weight: 900;}
.viewed {font-weight: 100;}
.reseter {color: blue;}

$(".classer").click( function() {
  $(this).toggleClass('viewed');
  event.preventDefault();
});

$(".classer").click(function(){
                       var btnStorage = $(this).attr("id");
                        if($(this).hasClass("viewed")) {
                            localStorage.setItem(btnStorage, 'true');
                        } else {
                            localStorage.removeItem(btnStorage, 'true');
                        }
                    });

$( ".classer" ).each(function() {
                      var mainlocalStorage = $( this ).attr( "id" );
                      if(localStorage.getItem(mainlocalStorage) == 'true') {
                        $(this).addClass("viewed");
                    } else {
                        $(this).removeClass("viewed");
                    }
                    });

$(".reseter").click(function(){
    localStorage.clear();
});

function refreshPage(){
    window.location.reload();
} 

Thanks for your attention!

Answer 1

got it resolved with something like this:

<div class="hiss classer"><div id="id00001" class="nju">Item 1</div></div><br><br>
<div class="hiss classer"><div id="id00002" class="nju">Item 2</div></div><br><br>
<div class="hiss classer"><div id="id00003" class="nju">Item 3</div></div><br><br>
<div class="hiss classer"><div id="id00004" class="nju">Item 4</div></div><br><br>
<div class="hiss classer"><div id="id00005" class="nju">Item 5</div></div><br><br>

<center><button class="reseter" onClick="refreshPage()">Reset</button></center>




.classer {position: absolute; background:grey; width: 50%; left:25%; color: white; font-weight: 900;}
.viewed {font-weight: 100;}
.reseter {color: blue;}





$(function(){

$( ".hiss" ).on( "click", function() {
                   var bunStorage = $(this).find(".nju").attr("id");
                    if($(this).hasClass("hiss")) {
                        localStorage.setItem(bunStorage, 'true');
                    } else {
                        localStorage.removeItem(bunStorage, 'true');
                    }
});

$( ".hiss" ).trigger( "click" );

});



$( ".hiss" ).each(function() {
                  var mainlocalStorage = $(this).find(".nju").attr("id");
                  if(localStorage.getItem(mainlocalStorage) == 'true') {
                    $(this).find(".nju").parent().addClass("viewed");
                } else {
                    $(this).find(".nju").parent().removeClass("viewed");
                }

                });





$(".reseter").click(function(){
localStorage.clear();
});


function refreshPage(){
window.location.reload();
}