CODEWITHSUNDEEP
javascripthtmlvariablescookiesglobal-variables
malmling
malmling

Reputation: 2518

Use javascript to remember what choices the user made on previous pages?

I have some pages, on the last page I need to know what choices a user made on the two last pages. Like this:

a.html User has three choices here that takes him/her to different urls. I need to somehow save this choice and use it later.

Example:

<script>globalVariable1="firstchoice"</script>

b.html This is one of three choices page and here the User have 3-4 new choices that takes him/her to different urls. I also need to save this choice somehow for later use.

Example:

<script>globalVariable2="thirdchoice"</script>

c.html This is the page where I need to know what choices the user has made earlier. To be able to link back to those exact pages if the user wants to go back in my breadcrumb-solution.

Example:

<script>
  if(globalVariable1 == "firstchoice"){
    //do this
  }
  if(globalVariable2 == "thirdchoice"){
    //do this
  }

</script>

Can I do this with some global variables in javascript or how can I solve this?

Thanks

Upvotes: 1

Views: 5250

Answers (5)

disatisfieddinosaur
disatisfieddinosaur

Reputation: 1550

You will have to store cookies to track the user's state. Try cookie.js. It has a really simple key-value interface that you can read about on its GitHub page.

Upvotes: 3

Tim Bartsch
Tim Bartsch

Reputation: 918

You can use localStorage. A browser API that persists key/value pairs even if you navigate between pages, reload the page or close and reopen the browser.

//setting a value
localStorage["foo"] = "bar";

//getting a value
var x = localStorage["foo"];

Using sessionStorage will also work.

//setting a value
sessionStorage["foo"] = "bar";

//getting a value
var x = sessionStorage["foo"];

Wikipedias Web Storage article describes the difference between localStorage and sessionStorage as:

Data placed in local storage is per domain (it's available to all scripts from the domain that originally stored the data) and persists after the browser is closed. Session storage is per-page-per-window and is limited to the lifetime of the window. Session storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other, a use case that's not well supported by cookies.

Upvotes: 5

Kyle Emmanuel
Kyle Emmanuel

Reputation: 2221

you can use localStorage or sessionStorage.

Upvotes: 2

glautrou
glautrou

Reputation: 3198

Web pages are stateless, so you cannot share global JavaScript variables between pages.

However you can set global variables for your page and containing modules by using the value of the cookie.

Your cookies will be available on all pages of your domain for the current browser.

Example:

//Page 1: Set cookie depending on user choice
$.cookie("choice1", ValueOfChoice1);

//Page 2: Get previous user choice
globalVariable1 = $.choice1("example");

You can read Setting cookies with jQuery if you want more details about how to use cookies.

Upvotes: 2

Oscar
Oscar

Reputation: 13960

Another choice if you're using some server-side language like PHP or Asp.Net is to sore those values in the user's session on the server.

Upvotes: 0

Related Questions