3

I have 2 styles on my page: blue (default) and red. 

<link  id="pagestyle" href="style_blue.css" rel="stylesheet" type="text/css" />

I'm using the following code to switch between stylesheets:

<script type="text/javascript">
    function swapStyleSheet(sheet){
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
</script>

<div id="color_blue" onClick="swapStyleSheet('style_blue.css')"></div>
<div id="color_red" onClick="swapStyleSheet('style_red.css')"></div>

When I open up a new page the setting gets lost obviously. What's an easy way to carry or store this information to the next page?

laptou
  • 6,389
  • 2
  • 28
  • 59
user3630430
  • 47
  • 1
  • 6
  • 7
    either a cookie or localStorage - http://www.w3schools.com/js/js_cookies.asp for cookies –  May 12 '14 at 23:33
  • All above + adding #settings to the next page url and query it there. – JAre May 12 '14 at 23:39
  • See this question http://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript for info on how to set and get a cookie in JavaScript – armadadrive May 12 '14 at 23:41

1 Answers1

5

Here are four options for carrying something from one page to the next:

  1. Set a cookie value on the first page and then when the second page loads, read that cookie value.

  2. Set a local storage value on the first page and then when the second page loads, read that local storage value.

  3. Add a query parameter to the URL of the second page before dispatching to it and then parse that query parameter off the URL when the second page loads.

  4. Store the parameter on your server (either via post or ajax call) so it can be available for the second page either incorporated into the second page by your server or queried from the server by the second page (via ajax).

If there's no reason to persist this value on your server and you don't need it to automatically expire in some short period of time and you don't need support before IE 8, then Local Storage is probably the simplest.

The advantage of storing it on the server is that the value will be available for this user (assuming you have a user login) no matter which browser they use.

The advantage of using a cookie is that it works in all browsers.

The advantage of using a query parameter is that there is no long term storage of the setting (it is essentially a one time thing).

The advantage of using Local Storage is that it's the simplest, but only applies to this particular browser.

Here's how simple Local Storage is:

// on page 1
localStorage.setItem("myValue", "foo");


// upon load of page 2
var myVar = localStorage.getItem("myValue");
if (myVar) {
    // code to do something based on the value of myVar
}

With local storage, remember that you're storing strings so if your native value isn't a string, you will have to convert it into the right type when you read it and make sure you're storing the right string value.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • And 4th option should be the fastest because you can avoid JS in the document head and it's cache friendly. – JAre May 12 '14 at 23:46
  • So how does OP do any of these things? – Popnoodles May 12 '14 at 23:47
  • 2
    @Popnoodles - added Local Storage example. – jfriend00 May 12 '14 at 23:51
  • +1. But not so agree with the 4th option. As local cookies should be handle at local. – jhyap May 13 '14 at 00:18
  • 1
    @jhyap - it really depends upon what type of option it is. If it's temporal (only for this browser), then cookie or local storage work fine, but if you want the state stored persistently for the user (regardless of browser), then you have to store on the server. it really depends upon the design goal. – jfriend00 May 13 '14 at 00:23