Question

这是我的

	$(".myLinks > li > a").click(function(){
		$("a.activeLink").removeClass("activeLink");
		$(this).addClass("activeLink");
	});

.activeLink{color:red!important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="myLinks">
    <li id="nav1"><a href="#">Link 1</a></li>
    <li id="nav2"><a href="#">Link 2</a></li>
    <li id="nav3"><a href="#">Link 3</a></li>
    <li id="nav4"><a href="#">Link 4</a></li>
    <li id="nav5"><a href="#">Link 5</a></li>
</ul>

我想将上次访问/点击的链接存储到本地存储中。我什么时候刷新浏览器，访问过的链接将显示为红色。这将是什么代码？ Output after storing it in local storage and browser refreshed

Answer 1

您可以使用以下功能来获取或设置本地存储值

function setStorageItem(key, value)
{
   localStorage.setItem(key, value);
}

function getStorageItem(key)
{
  return localStorage.getItem(key);
}

您可以像使用

一样使用它

$(".myLinks > li > a").click(function(){
        $("a.activeLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        setStorageItem("yourwebsitename_lastvisitedlink",$(this).attr("href"));
        setStorageItem("yourwebsitename_lastvisitedlinkID",$(this).parent("li").attr("id"));
    });

check this link for more information

Answer 2

这将存储一个＆＃34; last＆＃34;使用所点击链接的父li的ID键入本地存储。当他们点击链接时，它会覆盖当前密钥中的任何内容，这意味着它将始终反映用户点击的最后一个链接。

$(function() {
  var id = localStorage.getItem('last');
  $('#' + id).addClass('activeLink');
});

$(".myLinks > li > a").click(function(){
  /* start local storage stuff */
  var id = $(this).parent().attr('id');
  localStorage.setItem('last', id);
  /* end local storage stuff */
  $("a.activeLink").removeClass("activeLink");
  $(this).addClass("activeLink");
});

Answer 3

以下是 quick和示例代码段：

// Let's process when `DOM is ready`
$(document).ready(function() {

  // try-get the active item from `local storage`
  var activeLinkParentId = window.localStorage.getItem("activeLinkParentId");
  if (activeLinkParentId) {
    $("#" + activeLinkParentId + "> a").addClass("activeLink");
  }

  // Add click handler to the `anchor` tags
  $(".myLinks > li > a").click(function() {
    $("a.activeLink").removeClass("activeLink");
    window.localStorage.setItem("activeLinkParentId", $(this).parent().attr("id"));
    $(this).addClass("activeLink");
  });
});

.activeLink {
  color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myLinks">
  <li id="nav1">
    <a href="#">Link 1</a>
  </li>
  <li id="nav2">
    <a href="#">Link 2</a>
  </li>
  <li id="nav3">
    <a href="#">Link 3</a>
  </li>
  <li id="nav4">
    <a href="#">Link 4</a>
  </li>
  <li id="nav5">
    <a href="#">Link 5</a>
  </li>
</ul>

在JS或jQuery的帮助下使用本地存储

3 个答案: