保存cookie中的下拉菜单选项?

时间:2012-06-09 02:31:25

标签: javascript css cookies menu

我已经看过几次,但我根本无法获得代码。 我需要帮助制作此下拉菜单将其设置保存到Cookie,因此当用户再次访问该网站时,将保留其先前的选择。

下拉:

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

作为参考,此代码与Wordpress小部件中的一些Javascript一起改变了css代码,就像主题选择器一样。

如何将此保存为Cookie?我觉得我已经尝试了一切!

编辑: 我应该说,但我使用这段代码来改变CSS:

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

3 个答案:

答案 0 :(得分:11)

这些方面的东西应该对你有用。通过javascript创建cookie的功能在 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();
}

修改

保存Cookie

我已将两个功能合并为一个。

<强> 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

在返回页面时阅读Cookie

感谢dunsmoreb

我们可以使用此功能shamelessly stolen from this question获取Cookie。

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');

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

Live DEMO

答案 1 :(得分:3)

注意:此答案会添加到Josh Mein's answer。随意合并。

我们可以使用此功能shamelessly stolen from this question.

获取Cookie
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;
  }
});

答案 2 :(得分:-1)

您应该考虑在PHP中创建Session变量。

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

您可以将变量保存到会话中,当您加载页面时,您可以检查所设置变量的值,具体取决于它的值,下拉列表可能会以某种方式运行。也许将下拉项的名称存储为会话变量?