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>

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

$('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

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 2

工作小提琴：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 3

仅当localStorage不存在时才使用localStorage.setItem()将颜色存储在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; });存在时添加颜色才能获得颜色：

＆＃13;

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

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 4

你可以（应该）css：

：visited 是一个伪类选择器，如果用户的浏览器已经访问过链接，它可以更改锚链接（a）元素上的某些样式。它旨在帮助用户区分他们拥有和未访问过的链接之间的差异。

a:visited{
    color: pink;
}

这将按照您的意愿执行，在用户访问网址时设置锚点的样式。将被记住，直到历史被清除（无论如何，这将清除所有localStorage解决方案）您应该采用此方法，而不是自定义解决方案，因为此行为是用户的常见行为，您自己的解决方案可能会有所不同和混淆。

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

Answer 5

如果你看到这个答案和评论，你将会对你面临的问题有所了解。

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

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

喜欢

localStorage.setItem（＆＃39; visit＆＃39;，$（this）.find（＆＃39; a＆＃39;）。attr（＆＃39; href＆＃39;））;

Answer 6

首先获取您点击的相关链接，然后尝试将其保存在localstorage.setItem()中，并按localStorage.getItem()获取存储值。

尝试下面的脚本，希望这会像你提到的那样有用。

＆＃13;

 $(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');
        }
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何突出显示点击的元素？

6 个答案: