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.

Just generate a string: newURL= URL + "?param1=this&param2=that" — durbnpoisn, Jan 15 '16 at 18:07
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 — saikumar, Jan 15 '16 at 18:10
I agree the first comment is very useful. . . but call me an idiot, I have no idea how to do that. :P — About Leros, Jan 15 '16 at 18:16

Wilt · Answer 1 · 2016-01-15T19:18:43.453

2

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

edited Jan 15 '16 at 19:18

answered Jan 15 '16 at 18:18

Wilt

33,082
11
129
176

[It's kind of frowned on to use `new Array()` instead of `[]`](http://stackoverflow.com/questions/931872/what-s-the-difference-between-array-and-while-declaring-a-javascript-ar) – Mike Cluck Jan 15 '16 at 18:19
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 like onclick"url = url + dataToQueryString( data );" ? sorry trying to get my head around it. – About Leros Jan 15 '16 at 18:21
@AboutLeros You use `key` in the string... Or is that not what you mean? – Wilt Jan 15 '16 at 18:23
@Wilt I can't seem to get it to work. here is an example card. http://codepen.io/johnsonshara/pen/obGjGN – About Leros Jan 15 '16 at 18:41
will it still work if replace the word "cards" with "pin"? – About Leros Jan 16 '16 at 08:01

score 1 · Answer 2 · answered Jan 15 '16 at 18:21

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.

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 — About Leros, Jan 16 '16 at 05:27

How to store data as a url parameter using javascript?

2 Answers2

Linked