javascript 在 cookie 中保存下拉菜单选择？

Saving dropdown menu selection in a cookie?

提问by DANCUBE

I've seen this posted a few times, but I wasn't able to get the code working at all. I need help making this drop down menu save its settings to a cookie, so when the user visits the site again, their previous selection is retained.

我已经看到这个帖子发布了几次，但我根本无法让代码工作。我需要帮助让这个下拉菜单将其设置保存到 cookie，所以当用户再次访问该站点时，他们之前的选择会被保留。

Dropdown:

落下：

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

For reference, this code is with some Javascript in a Wordpress widget that changes the css code, like a theme selector.

作为参考，此代码与 Wordpress 小部件中的一些 Javascript 一起使用，可以更改 css 代码，例如主题选择器。

How would I make this save as a cookie? I feel like I've tried everything!

我如何将它保存为 cookie？我觉得我什么都试过了！

EDIT: I should have said, but I use this code to change the CSS:

编辑：我应该说，但我使用此代码来更改 CSS：

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

回答by Josh Mein

Something along these lines should work for you. The function to create a cookie via javascript was found in Setting a Cookie from JavaScript, a post on javascripter.net.

沿着这些方向的东西应该适合你。通过 javascript 创建 cookie 的函数可以在从 JavaScript 设置 Cookie 中找到 ，这是 javascripter.net 上的一篇文章。

HTML:

HTML:

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

Javascript:

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:

编辑：

Save the cookie

保存饼干

I have merged the two functions into one for you.

我已为您将这两个功能合二为一。

HTML:

HTML:

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

Javascript:

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

现场演示

Read the cookie on return to the page

返回页面时读取cookie

Thanks to dunsmoreb

感谢 Dunsmoreb

We can get the cookie using this function, 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;
}

Then we need to select the value when the page loads. The following code will accomplish just that:

然后我们需要选择页面加载时的值。下面的代码将实现这一点：

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

现场演示

回答by DANCUBE

Note: This answers adds to Josh Mein's answer. Feel free to merge it.

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

We can get the cookie using this function, 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;
}

Then we need to select the value when the page loads. The following code will accomplish just that.

然后我们需要选择页面加载时的值。下面的代码将实现这一点。

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

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

回答by Farzad A

You should look into creating Session variables in PHP.

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

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

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

You can save variables to a session and when you load the page, you check the value of the variable you set, depending on it's value, the dropdown could behave a certain way. Maybe store the name of the dropdown item as a session variable?

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