我已经看到这个帖子好几次了,但我根本无法让代码正常工作。 我需要帮助才能将此下拉菜单的设置保存到 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;
};
最佳答案
按照这些思路应该对您有用。通过 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();
}
在返回页面时读取 cookie
感谢 dunsmoreb
我们可以使用这个函数获取cookie,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');
themeSelect.value = selectedTheme;
saveclass = saveclass ? saveclass : document.body.className;
document.body.className = saveclass + ' ' + selectedTheme;
});
关于javascript - 在 cookie 中保存下拉菜单选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10957926/