如何利用本地存储？ （当点击函数向类中添加 data-id 时，css 颜色会发生变化）

Question

I tried it with the jquery code below but it can't be saved in localstorage , is there a solution other than the method below?

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<a class="abc" data-id="1">Attachments</a>
<a class="abc" data-id="2">Removal</a>
<a class="abc" data-id="3">Hair Loss</a>

JQuery

$(document).ready(function() {
  $(".abc").click(function() {
    var dataID = $(this).data('id');
    var idAdd = $(this).addClass("id" + dataID);
    $(idAdd).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });
    localStorage.setItem("someVarName", $(this).text());
  });

  if (localStorage.getItem("someVarName") != null) {
    var dataID = $(this).data('id');
    var clAD = $(this).addClass("id" + dataID);
    $(clAD).filter(function() {
      return this.innerHTML == localStorage.getItem("someVarName");
    }).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });
  }
});

Answer 1

The code

 var dataID = $(this).data('id'); var clAD = $(this).addClass("id" + dataID); debugger $(clAD).filter(function() { return this.innerHTML == localStorage.getItem("someVarName"); }).css({ "background": "#fcffd6", "border": "3px solid #acdcd86b" });

does not make any sense. What you want to do here is to enumerate and filter all a-elements:

 $("a").filter(function() { return this.innerHTML == localStorage.getItem("someVarName"); }).css({ "background": "#fcffd6", "border": "3px solid #acdcd86b" });