Taking css property from one html page to another page

Question

I am just wondering is there any way to take a CSS property from one page to another page.

Let me describe briefly - I am have two webpages, called one.html and two.html. In one.html there is a button called darkview. If the user clicks on the button then one.html's background colour will change.

In the same page I have a link. When the user clicks that, it will go to the second page (two.html). But now the problem is: I have changed the background colour in one.html, I want that also apply to second page. So how take that property and apply to the second page?

Here are a few lines code I have written.

(Problem can be solved by using JavaScript or jQuery.)

Davor Zubak · Answer 1 · 2012-12-03T12:42:39.933

2

You can use localStorage or sessionStorage to keep settings on browser level, or you can have session on the web server that can keep current state.

Http is stateless, which means that it cannot remember previous state or request, this is why session is created, or on client side, local storage, sessionStorage or even cookies. Simply save state to variable in localStorage and retrieve it on pageLoad.

edited Dec 03 '12 at 12:42

answered Dec 03 '12 at 12:34

Davor Zubak

4,726
13
59
94

ok.I am still not familiar with localStorage. Is there any way using JavaScript location object. – naresh kumar Dec 03 '12 at 12:38
1

Then get familiar with it, it doesn't get simpler than that – Kos Dec 03 '12 at 12:38
Also I'd recommend `sessionStorage` rather than `localStorage` unless the data is important enough to keep for prolonged time – Kos Dec 03 '12 at 12:39
@Kos, agreed! Use sessionStorage for simple state transfer! – Davor Zubak Dec 03 '12 at 12:41
thanks friends for all of your suggestion. I will learn this technique. and I will apply to my mobile project. – naresh kumar Dec 03 '12 at 12:53

score 1 · Answer 2 · answered Dec 03 '12 at 12:38

you can use cookies to store the state and simple check if cookie exists and what the value is. Is there no cookie, switch do default.

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
function checkCookie()
{
var theme=getCookie("theme");
  if (theme!=null && theme!="")
  {
  setTheme(theme);
  }
else 
  {
  theme="light";
  if (theme!=null && theme!="")
    {
    setCookie("theme",theme,365);
    }
  }
}

I think using this method also we can do it. But I am a fresher in javascript. so, for me it is littlebit difficult to understand. — naresh kumar, Dec 03 '12 at 12:50
All you have to do is edit the code in checkcookie and write a piece of javascript with the function setTheme("themename"){} that sets a cookie using setCookie() and then applies the theme. Default theme is "light"; — Tschallacka, Dec 03 '12 at 13:01

score 0 · Accepted Answer · answered Dec 03 '12 at 12:36

Guess this helps. You can use sessionStorage for temprory clientSide storage. If you want to persist the values, you can uses localStorage

One.html

<form>
     <input type="button" value="darkview" id="newColor"  />
</form>
<script>
window.onload = function() {
    var color = document.getElementById('newColor');
    color.onclick = function() {
        document.body.style.backgroundColor = '#ddd';
        window.sessionStorage['currentColor'] = '#ddd';
    }
}
</script>

Two.html

<script>
window.onload = function() {
    var color = window.sessionStorage['currentColor'];
    document.body.style.backgroundColor = color;
    }
}
</script>

Taking css property from one html page to another page

3 Answers3

Linked