Set and get cookie array of added html elements for each page/url

Question

I have a bookmark function that appends a caret (element) to a progress bar (element). The caret is absolutely positioned relative to the progress bar's width. The user can add multiple bookmarks. Resultant HTML;

<div class="progress-bar" style="width: 50%;">
    <div class="caret" style=" left:50%;"></div>
    <div class="caret" style=" left:60%;"></div>
</div>

What I would like to do is save these bookmarks in a cookie so that when the user revisits the page the bookmarks are in place.

I have the basic setup using this solution how to store an array in jquery cookie?

But I am stuck as to how to store and show a set of saved bookmark elements and how to do this for each page / url where bookmarks are saved.

Fiddle https://jsfiddle.net/jabuka/spevhqxv/

Thank you.

you can use localStorage to store the vaue – brk Apr 07 '16 at 03:25 — brk, Apr 07 '16 at 03:25
Good point - I will work on that rather. Thank you. – Jabuka Apr 07 '16 at 03:50 — Jabuka, Apr 07 '16 at 03:50

score 0 · Accepted Answer · answered Apr 07 '16 at 06:38

0

Add each element you create to an array, then convert it to a JSON object and store it in local storage, like this:

var json = JSON.stringify(elems);
localStorage.setItem('bookmarks', json);

When the user revisits the page you can load the JSON page again and add the elements:

elems = JSON.parse(localStorage.getItem('bookmarks'));
for(var i in elems){
 $('.progress-bar').append(elems[i]);
}

Here is a working JSFiddle

answered Apr 07 '16 at 06:38

Martiens Kropff

108
9

Awesome thank you. I added a check to see whether the array existed `elems = elems || [];` otherwise it threw an error. – Jabuka Apr 07 '16 at 06:59
Glad I could help! – Martiens Kropff Apr 07 '16 at 07:36

Set and get cookie array of added html elements for each page/url

1 Answers1