Can we carry selection from one page to another using jquery

Question

I am making a simple web application in html. What I need is, I have themes option. I have written the following code which is working fine. But the problem is, when a user selects a theme and goes to another page using link in this page, the theme is not carried to the other pages in the application.

Is there a way in jQuery, when a user selects a option in a page the selection can be carried to the next page so that the theme may take effect in other pages also.

Here is what I have. (This is written in .dwt file so that all pages can use this.)

<link rel="stylesheet" type="text/css" title="theme" href="css/styles_brown.css" />

<script>
 $(function() {
    $('#themes').change( function() {
            var rel = $('link[title="theme"]');
            switch($(this).val())
            {  
                case "brown":     
                {
                    rel.attr('href', 'css/styles_brown.css');  
                    break;
                }

                case "blue":  
                {
                    rel.attr('href', 'css/styles_blue.css');  
                    break;
                }
                case "green":  
                {
                    rel.attr('href', 'css/styles_green.css');  
                    break;
                }
                //Etc
            }
        });
});
</script>


<select id="themes" class="txtborder txtddpad">
        <option value="brown">Theme Brown</option>
        <option value="blue">Theme Blue</option>
        <option value="green">Theme Green</option>
    </select>

Thanks, Tharun.

Answer 1

if the user is able to change the theme of your website, you should probably save the configuration on the server side, and generate the appropriate style tags server-side.

If this is not an option, you could use something like cookies to save it on cookies. Either way you are gonna need some sort of storage, be it either client-side or server-side.

Some options people will point are probably cookies, or Local Storage. But neither of this are truly persistent or cross-platform. Give it a good thought to save the configuration on the server .

Answer 2

LocalStorage is your friend here:

http://diveintohtml5.info/storage.html

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

Answer 3

You can save a cookie, or use localstorage, like this:

localStorage.setItem("theme", "SOME_THEME_ID");
localStorage.getItem("theme");  // gets theme 

Answer 4

我建议您将用户的选择存储在本地存储中，并在以后的页面访问中读出来。