How to get a element stored in localstorage

Question

I'm storing an <a> element in localstorage and trying to get it back in a function which runs on window.onload event. Problem is, after storing that element I get [object Object] and when I apply jquery on it, it throws exception. I'm trying to get its parent here. Could anybody help me My code:-

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

I'm storing that link so that I could add 'active' class to it and its parent elemnt on page reload/refresh. On load I want them to be active in side menubar. my sidebar menu:-

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

better you can add values in localStorage, And onLoad just create new an element and append wherever you want. — Rahul P, Oct 24 '18 at 06:19
onload is loaded only first time when document loaded. So your click on the link doesn't effect on the onload event. — Md. Khirul Islam Omi, Oct 24 '18 at 06:24
duplicate of https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — niklas, Oct 24 '18 at 06:52
@niklas its not duplicate. at that link he is manipulating a proper object. here I'm dealing with whole element. — Samrat Matte, Oct 24 '18 at 07:14

score 0 · Accepted Answer · edited Oct 31 '18 at 19:24

0

What you can do is to convert your element to a string before saving to localstorage and converting it back to an object upon retrieval from localstorage.

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

Or you might want another approach. For example, you could store the index of the clicked a-Element in localstorage and reconstruct it on pageload like in the following 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);
});

I hope you get the idea. It is not wise to store more than you really need. Besides storing jQuery objects with functions is not possible as mentioned below.

edited Oct 31 '18 at 19:24

marc_s

732,580
175
1,330
1,459

answered Oct 24 '18 at 06:50

niklas

2,887
3
38
70

having a function within the tree will break on parse though – Sumodh Nair Oct 24 '18 at 07:08
sorry, it won't work. tried your way but other than losing exception, it had no profound effect on objective – Samrat Matte Oct 24 '18 at 07:16
1

Thanks a ton. With some modifications it worked like a charm. – Samrat Matte Oct 24 '18 at 09:02
1

That was the idea. To leave the adaption/learing-part to you. Happy to have you here. – niklas Oct 24 '18 at 11:47

How to get a element stored in localstorage

1 Answers1