2012-06-09 3 views
9

Я видел это несколько раз, но мне не удалось заставить код работать вообще. Мне нужна помощь в создании этого выпадающего меню, сохраняя его настройки в файле cookie, поэтому, когда пользователь снова посещает сайт, их предыдущий выбор сохраняется.Сохранение меню выпадающего меню в файле cookie?

Dropdown:

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

Для справки, этот код с некоторым Javascript в виджете Wordpress, который изменяет код CSS, как селектор темы.

Как я могу сохранить это как файл cookie? Я чувствую, что все пробовал!

EDIT: Я должен был сказать, но я использую этот код, чтобы изменить CSS:

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

ответ

10

Что-то вдоль этих линий должны работать для вас. Функция создания cookie с помощью javascript была найдена в Setting a Cookie from JavaScript, сообщение на 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(); 
} 

Edit:

Сохранить печенье

Я объединил две функции в одну для вас.

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

Прочитайте печенье на возвращение на страницу

Благодаря dunsmoreb

Мы можем получить cookie, используя эту функцию, shamelessly stolen from this question.

Затем нам нужно выбрать значение, когда страница загружается. Следующий код будет выполнять только что:

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

+1

Могу ли я предложить изменить: 'if (nDays == null || nDays == 0)' to 'if (! NDays)'? Таким образом, он проверяет значение null, zero и undefined. –

+1

Спасибо за предложение. Я обновил код. –

+0

Для меня это выглядит совершенно идеально, однако, когда я помещаю его на тестовую страницу, я понятия не имею, почему это не работает. http://dcvidya.com/testing/ - это страница, кстати. Я что-то делаю неправильно? – DANCUBE

-1

Вы должны смотреть на создание переменных сессии в PHP.

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

Вы можете сохранить переменные сеанса и при загрузке страницы, вы проверяете значение переменной, установленной в зависимости от его значения, раскрывающийся может вести себя определенным образом. Может быть, сохранить имя выпадающего элемента в качестве переменной сеанса?

+0

Он хочет знать, как он может настроить cookie через Javascript. –

+2

Если он хранит его в сеансе, он больше не будет доступен, если он покинет сайт и вернется позже. –

+0

А, это правда, извините. Хотя, если кто-то заинтересован в том, чтобы делать это на PHP, использование cookie может быть лучше ... http://www.w3schools.com/php/php_cookies.asp –

3

Примечание: Этот ответ добавляет Josh Mein's answer. Не стесняйтесь сливать его.

Мы можем получить печенье, используя эту функцию, 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; 
} 

Затем нам нужно выбрать значение при загрузке страницы. Следующий код выполнит именно это.

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

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

Демо-версия: [http://jsbin.com/uwuwuw](http://jsbin.com/uwuwuw). –

+0

Это совершенно странно для меня, даже это не работает.Я добавил код, который мне нужен в исходном вопросе, но даже когда я удаляю этот код со страницы примера, выбор по-прежнему не сохраняется. – DANCUBE

+1

Вы изменили код HTML? Он работает в [этой демонстрации] (http://jsbin.com/uwuwuw). –

Смежные вопросы