保存在cookie中的下拉菜单选择？(Saving dropdown menu selection

我已经看到了这个贴了几次，但我没能获得代码的所有工作。我需要帮助，使这个下拉菜单的设置保存到一个cookie，所以当用户再次访问该网站，他们以前选择保留。

落下：

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

作为参考，这个代码是一些JavaScript在WordPress的小工具，改变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;
};

Answer 1:

沿着这些线路的东西应该为你工作。该函数创建一个cookie通过JavaScript在发现设置从JavaScript一个Cookie ，上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();
}

现场演示

读取cookie在返回页面

由于dunsmoreb

我们可以使用此功能，得到了饼干从这个问题无耻地窃取。

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

现场演示

Answer 2:

注：此答案增加了约什-拜见的答案。 随意合并。

我们可以使用此功能，得到了饼干从这个问题无耻被盗。

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