Java Script: Passing variables between html pages

Question

I am practicing making an e-commerce site. I am struggling passing my javascript variable between the shopping cart page to the checkout page. I tried following this example:

page one:
<a href="example2.html?myVar1=42&myVar2=66" >LINK</a>

page 2:

var qs = new Querystring();

var v1 = qs.get("myVar1");

var v2 = qs.get("myVar2");

I could not get it to work because my webpage threw an error about not recognizing QueryString, so I am currently trying like this by using window.localStorage as follows:

Page 01:

<button class="checkout" type="button" onClick="window.location.href='checkout.html'; window.localStorage.setItem("total",total)">Checkout</button>


Page 2:

var name = window.localStorage.getItem("total");

Currently, I am throwing a console.log(total) on the 2nd page but it returns "null" each time. Any idea why it's not catching the value from the first page? Please help. If you have suggestions or a solution for either method, it would be much appreciated. I feel like I'm really close with the 2nd method, I may just be missing something on the page 1 portion, thanks in advance.

While using localStorage is not an unreasonable solution, you're not really doing the javascript stuff inline in the html are you? Also, if you're going to use localStorage, you'd better check if it's available for the user and fail gracefully if not. This page has a good example showing how to check if it's available: developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/… — JakeParis
– JakeParis, Commented Feb 18, 2017 at 21:15
what does 'could not get it to work' mean? Your snippets are not really valid — pvg
– pvg, Commented Feb 18, 2017 at 21:16
queryString() is not a built-in javascript function. You probably want to look in window.location.search for the query string. — JakeParis
– JakeParis, Commented Feb 18, 2017 at 21:18

JakeParis · Accepted Answer · 2017-02-18 21:29:44Z

1

To fix your first method (passing variables between pages via a query string), you'd probably want something like:

// page one:
<a href="example2.html?myVar1=42&myVar2=66" >LINK</a>

// page 2:

var query = window.location.search;
if( typeof query !== 'undefined' ) {
    var params = {},
        parts
    ;
    // take off the ? and split into groups of key=value strings
    query = query.replace('?','').split('&');

    // split key=value strings into a usable object
    for(var i=0;i<query.length;i++){
        parts = query[i].split('=');
        params[ parts[0] ] = parts[1];
    }

    // now access your variables like so:

    params.myVar1 // is now "42" (a string)
    params.myVar2 // "66"

}

edited Feb 18, 2017 at 21:29

answered Feb 18, 2017 at 21:24

JakeParis

11.2k6 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pvg Over a year ago

On a modern browser, you can just use the URL object, alternatively, a library (which is what I think the poster is attempting but it's somehow not working out for them). Hacking your own querystring parser is unnecessary and likely a bad idea because there are zillions of things that can go wrong. Take a look at unixpapa.com/js/querystring.html

JakeParis Over a year ago

URLSearchParams doesn't seem to be available in a bunch of desktop and mobile browsers.

Collectives™ on Stack Overflow

Java Script: Passing variables between html pages

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related