Spara stilmall i cookie - javascript

Har lyckats fixa så att användaren kan välja mellan 4 olika stilmallar i en drop-down meny. Nu ska jag bara få den valda stilmallen att sparas i en cookie, så när sidan besöks igen ska det senast valda stilmallen aktiveras (genom att läsa av cookien). Säker inte så svårt om man kan det :)

Har i alla fall försökt att skapa en cookie, är dock inte säker på om jag lyckats eller om det bara är några små saker som måste rättas till? Men som det är nu så fungerar det inte!

Är jag på rätt väg? I så fall, var i koden ligger felen? :p

såhär ser min kod ut i js-filen:

//Hitta cookie
function findValue(value)
{ 
  var cookies = document.cookie.split('; '); 
  for (var i=0; i<cookies.length; i++) 
  { 
    var cookieParts = cookies[i].split('='); 
	var cookieName = cookieParts[0]; 
	var cookieValue = cookieParts[1]; 
	if (value == cookieName) 
	{ 
	  return cookieValue; 
	} 
  } 
  return false; 
}

//Skapa cookie
function createTimedCookie(links, days)
{ 
  var cookieTime = links[0] + days; 
  document.cookie = cookieTime; 
}

//Kolla vilken stilmall som ska sparas
function refreshPageValue(links, days)
{ 
  links = findValue("style1", "style2", "style3");
    
  if (links == false || "style1")
  {                                             
    links[0].href = "style1.css"; //Tror det är lite fel här, men vet inte vad jag ska skriva?
  } 
  else if (links == "style2")
  { 
    links[0].href = "style2.css"; //Samma gäller även här, 	
  } 
  else if (links == "style3")
  { 
    links[0].href = "style3.css"; //här, 
  } 
  else 
  { 
    links[0].href = "style4.css"; //och här!
  }
  changeStyle(links, 30);  
} 

//Antal dagar cookien ska sparas
function changeStyle(links, days)
{ 
  var date = new Date();
  var days = date.toGMTString(30);
  date.setDate(date.getDate()+ days);
   
  createTimedCookie(links, 30); 
  refreshPageValue(links, 30); 
}

//init
function init()
{
  //Byrer stilmall 
  function show() 
  {
    var links = document.getElementsByTagName("link");
    var value = this.id;	  

    switch (value) 
    {    
      case "style1":			
      links[0].href = "style1.css";		
	  refreshPageValue(links, 30);
      break;
  
      case "style2": 			
      links[0].href = "style2.css";	
	  refreshPageValue(links, 30);
      break;
    
      case "style3": 		
      links[0].href = "style3.css";		
	  refreshPageValue(links, 30); 
      break;
  
      case "style4": 		
      links[0].href = "style4.css";				
	  refreshPageValue(links, 30); 
      break;
    }
  }
}
window.onload = init;

Till att börja med är funktionen för att skapa cookien helt åt skogen. Jag rekommenderar att du använder följande två rutiner från quirksmode.

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Sen finns det en hel del andra saker att anmärka på, som t ex hur du använder funktionerna. Du verkar försöka spara en separat cookie per stilmall, eller nåt. Du bör spara en enda cookie, där värdet motsvarar den valda stilmallen.

function changeStyle(style) 
{  
  // "style" är en sträng, som är cookiens namn
  // style är en variabel som innehåller namnet på den valda stilen
  createCookie("style", style, 30);  

  var links = document.getElementsByTagName("link");

  link[0].href = "style" + style + ".css"; 
} 

function init(){
  // Hämta sparad stil
  var style = readCookie("style");

  // Om det inte finns någon cookie, välj stil 1
  if (style == null){
    style = 1;
  }

  changeStyle(style);
}

window.onload = init;

Och sen anropar du funktionen typ så här:

<a href="#" onclick="changeStyle(1);">Byt till stil 1</a>
<a href="#" onclick="changeStyle(2);">Byt till stil 2</a>
<a href="#" onclick="changeStyle(3);">Byt till stil 3</a>

Tusen tack för hjälpen!! :)
Fungerar som det ska i FF och IE, men tyvärr inte i Chrome?

Hoppsan. Jag skrev koden utan att testköra, så det var bra att den funkade alls. (Jag noterar ett litet stavfel, link/links i changeStyle, vilket jag antar att du fixade.)

Ny kod:

<html>
<head>
<link rel="stylesheet" href="stil0.css" type="text/css" disabled="disabled">
<link rel="stylesheet" href="stil1.css" type="text/css" disabled="disabled">
<link rel="stylesheet" href="stil2.css" type="text/css" disabled="disabled">

<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function changeStyle(style)
{
  // "style" är en sträng, som är cookiens namn
  // style är en variabel som innehåller namnet på den valda stilen
  createCookie("style", style, 30);

  var links = document.getElementsByTagName("link");

  for(var i=0; i<3; i++){
    if(i == style){
      links[i].disabled = false;
    }else{
      links[i].disabled = true;
    }
  }
}

function init(){
  // Hämta sparad stil
  var style = readCookie("style");

  // Om det inte finns någon cookie, välj stil 0
  if (style == null){
    style = 0;
  }

  changeStyle(style);
}

window.onload = init;
</script>
</head>
<body>
<a href="#" onclick="changeStyle(0);">Byt till stil 1</a>
<a href="#" onclick="changeStyle(1);">Byt till stil 2</a>
<a href="#" onclick="changeStyle(2);">Byt till stil 3</a>
</body>
</html>

Notera ett par saker. Jag numrerar nu kode stilmallarna från 0 istället för från 1, eftersom det är så datorer "vill" att man ska göra. (Saker blir oftare enklare då.)

Nu vet inte jag om du testkör lokalt på datorn eller om sidan ligger uppe någonstans, men chrome sparar inga cookies lokalt.

Kan vara bra att veta.

Jag behöver låna tråden från dig Miini, hoppas det inte gör mycket.

En sak jag funderade över var hur lösningen hade sett ut ifall man inte fick använda javascrpit som t.ex. onclick="changeStyle() i HTML-filen utan kopplade det istället genom javascript-filen?

leta upp DOM objekteten och bind click event på den.

Som i detta fall när man skapar en drop-down meny skapar man först menyn med ett ul<element> som har ett id i HTML-filen.

För att sedan greppa alla länkarna använder man

 var exempel = document.getElementById('ulElementetsId').getElementsByTagName('a');

Sedan tappar jag tråden lite. Jag antar att man kör en for-loop för att gå igenom alla länkar där man till slut ropar på

exempel[i].onclick = changeStyle(style);

Det jag undrar nu är vad händer med

  var style = readCookie("style");

  // Om det inte finns någon cookie, välj stil 0
  if (style == null){
    style = 0;
  }

Ska det också tillhöra for-loopen eller vad händer med det?