如何利用本地存储？ 当click函数将data-id添加到类中时，css颜色就会更改

问题描述

我用下面的jquery代码尝试过，但是无法保存在localstorage中，除了下面的方法以外，还有解决方案吗？

<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"
    });
  }
});

解决方法

代码

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"
    });

没有任何意义。您要在此处进行的操作是枚举并过滤所有a元素：

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