How to store data as a url parameter using javascript?

Question

I have a tabbed navigation menu and I have created hashed URLs for each tab. In one tab I have multiple information cards and a check box in the top right hand corner of each card. when this check box is checked the card's background color changes.

My objective is that when the page is refreshed or sent as a link the cards that have been checked remain checked along with the changed background color. Any help would really be appreciated.

• durbnpoisn: Just generate a string: newURL= URL + "?param1=this&param2=that"
• saikumar: you can use localStorage. ex: on every check box selection, store current-tab in localStorage like...localStorage.setItem('current-tab', 'tab1'). on document ready you can get same thing using localStorage.getItem('current-tab'), it will return 'tab1', then you can manipulate url
• Mike Cluck: @saikumar But that won't work if it's sent as a link.
• saikumar: yes, then first comment is usefull
• About Leros: I agree the first comment is very useful. . . but call me an idiot, I have no idea how to do that. :P

Answer 1

You can use a function like this:

function dataToQueryString(data){
 var encoded = [];
 for(var key in data){
 // skip prototype properties
 if(!data.hasOwnProperty(key)) continue;
 // encode string properly to use in url
 encoded.push(key + '=' + encodeURIComponent(data[key]));
 }
 return '?' + encoded.join('&');
}

And use it like:

data = {
 id: 1,
 name: "John Doe"
}
url = url + dataToQueryString( data );

---

Or more specific for your case:

function storeCardsInQueryString(cards){
 var encoded = [];
 for(var i = 0; i < cards.length; i++){
 encoded.push('cards[]=' + cards[i]);
 }
 return '?' + encoded.join('&');
}

And use it like:

cards = [ 1, 7, 21, 22, 53 ];
url = url + storeCardsInQueryString( cards );

• Mike Cluck: It's kind of frowned on to use new Array() instead of []
• About Leros: do I need to add in some reference to what data it is saving such as an id? and use it like that where, in the <a> like onclick"url = url + dataToQueryString( data );" ? sorry trying to get my head around it.
• Wilt: @AboutLeros You use key in the string... Or is that not what you mean?
• About Leros: @Wilt I can't seem to get it to work. here is an example card. codepen.io/johnsonshara/pen/obGjGN
• About Leros: will it still work if replace the word "cards" with "pin"?

Answer 2

I think you need to use the combination of url parameter and localStorage to achive both refreshing and link requirements.

Lets say a user open your site with this url:

www.mysite.com/mypgae?tab=tab1&card1=checked&card2=unchecked&card3=checked

You read these parameters in your page javascript and will goto tab1 and mark card2 and card3 as checked and card2 as unchecked

now lets assume that the user changes the tab and some cards, you should store these changes in the localStorage and next time the user refreshed the page, at first you check the localStorage if it was empty you go for the url. But, if localStorage was not empty you give priority to localStorage and apply changes based on localStorage instead of url.

That is the only way that comes to my mind to support both url and local changes at the same time.

• About Leros: That sounds really good and i've been reading up on local storage, but there is not a lot of info about storing as a url. and then using a mix of the two, i'm a bit out of my depth here. lol