Как получить элемент <a>, хранящийся в localalstorage - PullRequest
Новая
       8

Как получить элемент <a>, хранящийся в localalstorage

0 голосов
/ 24 октября 2018

Я храню элемент <a> в localstorage и пытаюсь вернуть его обратно в функцию, которая запускается при событии window.onload.Проблема в том, что после сохранения этого элемента я получаю [объект объекта], и когда я применяю к нему jquery, он вызывает исключение.Я пытаюсь найти здесь своего родителя.Может ли кто-нибудь мне помочь Мой код: - 

$('a').on('click', function(){
  localStorage.setItem('link', $(this));
})
window.onload=function(){
  var link = localStorage.getItem('link'); //gives [object Object]
  var parent = $(link).parent(); //got error here
}

Я храню эту ссылку, чтобы я мог добавить к ней «активный» класс и его родительский элемент при перезагрузке / обновлении страницы.На нагрузке я хочу, чтобы они были активны в боковом меню.Меню моей боковой панели: - 

<ul>
 <li id="1">
  <ul><li><a href="/pages/1"></a></li><li><a href="/pages/2"></a></li></ul>
 </li>
 <li id="1">
  <ul><li><a href="/pages/3"></a></li><li><a href="/pages/4"></a></li></ul>
 </li>
</ul>

1 Ответ

0 голосов
/ 24 октября 2018

Что вы можете сделать, это преобразовать ваш элемент в строку перед сохранением в localalstorage и преобразовать его обратно в объект после извлечения из localalstorage.

$('a').on('click', function(){
  localStorage.setItem('link', JSON.stringify(this));

  var retrievedObject = localStorage.getItem('link');

  //do anything with the object from localstorage
  console.log(JSON.parse(retrievedObject));
});

Или вам может понадобиться другой подход.Например, вы можете сохранить индекс выбранного элемента a в localalstorage и восстановить его по загрузке страницы, как показано на следующем рисунке

https://codepen.io/niklasp-the-looper/pen/Xxxyay?editors=1010

$('ul a').each(function(idx, element) {
  $(element).on('click', function() {
    localStorage.setItem('linkIdx', idx);
  });
});

$('#get').on('click', function() {
  var linkIndex = localStorage.getItem('linkIdx');
  var element = $('a')[linkIndex];
  console.log(element);
});

Надеюсь, вы поняли идею,Не стоит хранить больше, чем вам действительно нужно.Кроме того, сохранение объектов jQuery с функциями невозможно, как указано ниже.

...