11

我已经看过几次这个帖子，但我根本无法让代码正常工作。我需要帮助使此下拉菜单将其设置保存到 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;
};
4

3 回答 3

12

这些方面的东西应该适合你。在 javascripter.net 上的一篇文章Setting a Cookie from JavaScript中找到了通过 javascript 创建 cookie 的功能 。

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

感谢邓斯莫尔布

我们可以使用这个功能获取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;
});

现场演示

于 2012-06-09T02:37:36.527 回答
3

注意：这个答案增加了Josh Mein 的答案。随意合并它。

我们可以使用这个功能获取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;
  }
});
于 2012-06-09T03:05:10.243 回答
-1

您应该研究在 PHP 中创建 Session 变量。

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

您可以将变量保存到会话中，并在加载页面时检查您设置的变量的值，根据它的值，下拉菜单可能会以某种方式运行。也许将下拉项目的名称存储为会话变量？

于 2012-06-09T02:38:36.450 回答