Displaying a JS var across different pages

Question

This is a kind of difficult question because I'm not sure how to word it. I'm making a shopping cart website using HTML5 and JS and I've got most of it down, but need help with one important aspect.

At the moment my "Buy Now" buttons are in tags that link to 1 page where the user can enter his info and make the purchase, this page is called "checkout". I want this "checkout" page to display the price of the item he wishes to purchase.

For ex) The user clicks on an book worth $10.00 and clicks the buy now button. This button will send him to the confirmation page where it will show a fill form, but the page does not show the price of the item he is purchasing.

This is where my problem lies. I can't think of any solution for this besides making a different page for each product (I only have 9 products).

Also, if it isn't blatantly obvious, I'm still a beginner with JS. Any help would be appreciated in helping me figure out how to display the price on the "checkout" page of each specific item without creating 9 separate pages. Thank You.

Answer 1

The best way is to use some serverside solution. The client sends his form to your server, where the form gets evaluated and an according html-page is rendered.

The only other way is either using cookies or local Storage - but that's rather ugly.

You definitely should read some tutorials about php and mysql, but I'll give you rough overview on how to achieve this.

You provide a form on your page like this:

<form method="post" action="your-serverside-phpscript-that-processes-your-form.php>
   How many Ipads you wanna buy:<input type="number" name="ipads">
   <button type="submit">
</form>

now on serverside your php-script can evaluate the form.

all formfields are stored in a $_POST array. ( $_POST["ipads"] ) gets the value the user entered in the form. You don't need to store these values in the database yet. You evaluate the formvalues and create the checkout-page with the according data (total price). Now the user submits the checkout-form, which you again process and store in the database.

I won't write down (sry, too tired) how this serverside part works, there are tons of tuts out there, just search google for php+mysql.

Answer 2

Since you're wanting to persist this data all on the client-end, I would encourage you to check out Amplify.Store. In full disclosure, I am currently employed by the company behind it - but it's great, and free.

Saving data is easy:

amplify.store( 'cart', { name: 'Book Title', price: 10.99 } );

To access this a little later, you can simply call:

amplify.store( 'cart' );

This will return your object from which you can get all of the products currently loaded. Amplify will evaluate your system and determine which storage method is best, and use it. This removes all of the guess-work form your plate, and let's you just do what it is you're wanting to do.

Please understand that while it is convenient to persist data client-side, it is by no means secure. When dealing with transactions and issues of a financial nature, you should always keep figures out of the hands of the consumer.

Generally data like this is stored server-side, within a session, a database, or a combination of both. However, if you understand the risks, and your model permits this type of persistence, then by all means feel free to use this as a solution.

Answer 3

If I understand correctly, you are asking how to store a variable in Javascript that can be retrieved by multiple pages.

The canonical way to do this is to use cookies. The native cookie library is rather messy, so I recommend using a cookie library, like this.

However, since your question is tagged html5, you might be open to the sessionStorage HTML5 solution for this, which is much simpler than cookies.

sessionStorage.setItem("price", 100);
var price = sessionStorage.getItem("price");