如何获取存储在 localstorage 中的 <a> 元素

Question

我在 localstorage 中存储了一个 <a> 元素，并试图在一个在 window.onload 事件上运行的函数中取回它。问题是，在存储该元素后我得到 [object Object] 并且当我在其上应用 jquery 时，它会抛出异常。我正在尝试在此处获取它的 parent。谁能帮帮我我的代码：-

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

我正在存储 link，以便我可以将 'active' class 添加到它及其 reload/refresh 页上的 parent 元素。加载时，我希望它们在侧面菜单栏中处于活动状态。我的侧边栏菜单：-

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

Answer 1

您可以做的是在保存到本地存储之前将您的元素转换为字符串，并在从本地存储检索时将其转换回对象。

$('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-Element 的索引存储在本地存储中，并在页面加载时重建它，如下面的 pen

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 具有函数的对象之外，如下所述是不可能的。

如何获取存储在 localstorage 中的 <a> 元素

How to get a <a> element stored in localstorage

jquery

onload