¿Guardar la selección del menú desplegable en una cookie?

Question

He visto esto publicado varias veces, pero no he podido obtener el código funcionando en absoluto. Necesito ayuda para que este menú desplegable guarde su configuración en una cookie, por lo que cuando el usuario visita el sitio nuevamente, se retiene su selección anterior.

desplegable:

<select id="ThemeSelect"> 
    <option value="zelda">Zelda</option> 
    <option value="smb2">SMB 2</option> 
</select> 

Como referencia, este código es con un poco de Javascript en un widget de Wordpress que cambia el código CSS, como un selector de tema.

¿Cómo puedo hacer que esto se guarde como una cookie? ¡Siento que intenté todo!

EDIT: que debería haber dicho, pero utilizar este código para cambiar el CSS:

var saveclass = null; 
var sel = document.getElementById('ThemeSelect'); 
sel.onchange = function(){ 
    saveclass = saveclass ? saveclass : document.body.className; 
    document.body.className = saveclass + ' ' + sel.value; 
}; 

Answer 1

Algo a lo largo de estas líneas debe trabajar para usted. La función para crear una cookie mediante javascript se encontró en Setting a Cookie from JavaScript, una publicación en javascripter.net.

HTML:

<select id="ThemeSelect" onchange="setCookie('theme', this.value, 365);"> 
    <option value="zelda">Zelda</option> 
    <option value="smb2">SMB 2</option> 
</select> 

Javascript:

function setCookie(cookieName, cookieValue, nDays) { 
    var today = new Date(); 
    var expire = new Date(); 

    if (!nDays) 
     nDays=1; 

    expire.setTime(today.getTime() + 3600000*24*nDays); 
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString(); 
} 

Editar:

Guardar la cookie

He combinado las dos funciones en una para usted.

HTML:

<select id="ThemeSelect" onchange="saveTheme(this.value);"> 
    <option value="zelda">Zelda</option> 
    <option value="smb2">SMB 2</option> 
</select> 

Javascript:

var saveclass = null; 

function saveTheme(cookieValue) 
{ 
    var sel = document.getElementById('ThemeSelect'); 

    saveclass = saveclass ? saveclass : document.body.className; 
    document.body.className = saveclass + ' ' + sel.value; 

    setCookie('theme', cookieValue, 365); 
} 

function setCookie(cookieName, cookieValue, nDays) { 
    var today = new Date(); 
    var expire = new Date(); 

    if (nDays==null || nDays==0) 
     nDays=1; 

    expire.setTime(today.getTime() + 3600000*24*nDays); 
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString(); 
} 

Live DEMO

Leer la cookie en el retorno a la página

Gracias a dunsmoreb

Podemos obtener la cookie mediante esta función, shamelessly stolen from this question.

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; 
} 

Luego tenemos que seleccionar el valor cuando se carga la página. El siguiente código lograr precisamente eso:

document.addEventListener('DOMContentLoaded', function() { 
    var themeSelect = document.getElementById('ThemeSelect'); 
    var selectedTheme = readCookie('theme'); 

    themeSelect.value = selectedTheme; 
    saveclass = saveclass ? saveclass : document.body.className; 
    document.body.className = saveclass + ' ' + selectedTheme; 
}); 

Live DEMO

Answer 2

usted debe buscar en la creación de variables de sesión en PHP.

http://www.w3schools.com/php/php_sessions.asp

Puede guardar las variables a una sesión y cuando se carga la página, comprobar el valor de la variable se establece en función de su valor, en el menú desplegable podría comportarse de cierta manera. ¿Tal vez almacenar el nombre del elemento desplegable como una variable de sesión?

Answer 3

Nota: Esta respuesta se suma al Josh Mein's answer. Siéntase libre de combinarlo.

Podemos obtener la cookie de utilizar esta función, shamelessly stolen from this question.

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; 
} 

entonces tenemos que seleccionar el valor cuando se carga la página. El siguiente código logrará eso.

document.addEventListener('DOMContentLoaded', function() { 
    var themeSelect = document.getElementById('ThemeSelect'); 
    var selectedTheme = readCookie('theme'); 

    if (selectedTheme) { 
    themeSelect.value = selectedTheme; 
    } 
});