如何使单击的元素突出显示？

Question

我正在尝试突出显示看到的帖子。这是我的代码的简化演示：

$('li').on('click', function(){
  $(this).css('background-color','pink');
  return false;
});

li{
  cursor: pointer;
}

li:hover{
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href='#1'>first post</a></li>
  <li><a href='#2'>second post</a></li>
  <li><a href='#3'>third post</a></li>
</ul>

如您所见，它为点击的帖子设置了粉红色的背景颜色。现在我需要将它存储到本地存储中。像这样的：

$('li').on('click', function(){
  $(this).css('background-color','pink');

  // storing into localstorage
  if (typeof(Storage) !== "undefined") {
      localStorage.seen = $(this).find('a').attr('href');
  }

  return false;
});

---

好的，我的问题是什么？

如何检查 localstorage 然后将粉红色背景设置为元素？ （当浏览器关闭并再次打开时）。如您所知，一段时间后，localStorage.seen 将包含大量帖子的链接。那么我应该如何搜索呢？

无论如何，我该如何实现一种机制来处理这种事情？

Answer 1

工作小提琴：https://jsfiddle.net/7hww5116/

CSS：

li{
  cursor: pointer;
}

 li:hover{
    background-color: #eee;
 }

HTML：

<ul>
  <li><a href='#1'>first post</a></li>
  <li><a href='#2'>second post</a></li>
  <li><a href='#3'>third post</a></li>
</ul>

JS：

var seen = [];
$('li').on('click', function(){
$(this).css('background-color','pink');
// storing into localstorage
if (typeof(Storage) !== "undefined") {
    if(!seen.includes($(this).find('a').attr('href'))){
        seen.push($(this).find('a').attr('href'));
        // Set to localStorage
        localStorage.setItem('seen', JSON.stringify(seen));
    }
  }
});

var seenAlready = JSON.parse(localStorage.getItem('seen'));
$.each(seenAlready,function(index, value){
   $("a[href="+'"'+value+'"'+"]").parent().css('background-color','pink');
});

Answer 2

localStorage stores key-value pairs。因此，要存储整个 javascript 对象，我们需要先对其进行序列化（例如使用 JSON.stringify）：

localStorage.setItem('color', JSON.stringify(color));

stringify 表示，获取一个对象并将其呈现为string

然后从存储中检索它并再次转换为对象：

var color = JSON.parse(localStorage.getItem('color'));

如果我们需要删除商店的所有条目，我们可以简单地这样做：

localStorage.clear();

Answer 3

仅当颜色不存在时使用localStorage.setItem() 将颜色存储在localStorage 中，仅当存在时使用localStorage.getItem() 添加颜色以获取颜色：

$('li').on('click', function() {
  var color = localStorage.getItem('color');
  if (color === null) {
    localStorage.setItem('color', $(this).find('a').attr('href'));
  } else {
    $(this).find('a').css('background-color', 'pink');
  }
  return false;
});

li {
  cursor: pointer;
}

li:hover {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href='#1'>first post</a></li>
  <li><a href='#2'>second post</a></li>
  <li><a href='#3'>third post</a></li>
</ul>

Answer 4

如果您看到此答案和 cmets，您将了解您所面临的问题。

https://stackoverflow.com/a/37496814/1174865

您需要使用自定义数组来存储应用程序特定的数据，而不是 localStorage.seen。

喜欢

localStorage.setItem('visited', $(this).find('a').attr('href'));

Answer 5

你可以（应该）css这个：

:visited 是一个伪类选择器，如果用户的浏览器已经访问了链接，它可以更改锚链接 (a) 元素的一些样式。它旨在帮助用户区分他们访问过和未访问过的链接。

a:visited{
    color: pink;
}

这将按照您的意愿进行，当用户访问 url 时设置锚的样式。将被记住，直到历史记录被清除（这也将清除所有 localStorage 解决方案）。
您应该这样做，而不是自定义解决方案，因为这种行为是用户的常见行为，您自己的解决方案可能会有所不同和混淆。

https://css-tricks.com/almanac/selectors/v/visited/

Answer 6

首先获取你点击的相对链接，然后尝试将其保存在localstorage.setItem()，并通过localStorage.getItem()获取存储值。

试试下面的脚本，希望这会像你提到的那样工作。

 $(document).ready(function () {
        $('ul li a').on('click', function (e) {
            localStorage.setItem('color', $(e.target).attr('href'));
        });
        var activeLink = localStorage.getItem('color');
        if (activeTab) {
            $('ul li a[href="' + activeLink + '"]').css('background-color', 'pink');
        }
    });

li{
        cursor: pointer;
    }

    li:hover{
        background-color: #eee;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href='#1'>first post</a></li>
    <li><a href='#2'>second post</a></li>
    <li><a href='#3'>third post</a></li>
</ul>