Вот мой

	$(".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>

Я хочу сохранить последнюю посещенную / нажатую ссылку в локальном хранилище. И когда я обновлю браузер, посещаемая ссылка будет показана красным цветом. Какой будет код для этого? Вывод после сохранения в локальном хранилище и обновления браузера

-4
Rajib Kumar Bhowmik 13 Янв 2017 в 01:07

3 ответа

Лучший ответ

Вот фрагмент quick and sample для работы:

// 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>
0
Lijo Joseph 13 Янв 2017 в 00:05

Вы можете использовать следующую функцию, чтобы получить или установить значения локального хранилища

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

проверьте эту ссылку для получения дополнительной информации

0
K D 12 Янв 2017 в 22:23

Это сохранит «последний» ключ в локальном хранилище с идентификатором родителя li для нажатой ссылки. Когда они нажимают на ссылку, она перезаписывает все, что находится в ключе в данный момент, то есть оно всегда будет отражать последнюю ссылку, которую пользователь нажал.

$(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");
});
0
Michael Coker 12 Янв 2017 в 23:30