我有一些样式表，但是如何让用户保存他们上次访问网站时的自定义样式表？我可以用 Jquery 和 HTLM5 来做吗？
【问题讨论】：
标签： javascript jquery html css
有很多不同的方法可以做到这一点，但如果你不想用过多的数据库/cookies 来破坏你的服务器（假设你在后端没有身份验证系统），那么你可以保存一个类，所以......虽然你需要做css：
$(document).ready(function () {
applyTheme();
});
$(".theme").click(function (e) {
e.preventDefault();
//removes current stylesheet
$("#customSheet").remove();
//gets the theme name the user clicked
var themeName = $(this)[0].id;
//sets it to storage
setTheme(themeName);
//appends to the head so it loads
$('head').append('<link href="css/' + themeName + '.css" rel="stylesheet" id="customSheet" />');
});
// sets local storage, pretty self explanatory, localstorage is an object that persists across the browser state until the user clears it out, usually because of some other plugin or just clears the cache
function setTheme(theme) {
localStorage.setItem('themeClass', theme);
}
//how to apply the theme to the document's body so that it can conditionally load
function applyTheme() {
var theme = localStorage.getItem('themeClass');
if (theme) {
$('head').append('<link rel="stylesheet" type="text/css" href="css/' + theme + '.css" id="customSheet">');
}
}
所以如果在你最喜欢的东西中，css 文件被称为“theme1”，如果你把它放在正确的路径中，它会加载 theme1
编辑：
实现这种特定方式的 HTML 是
<div id="theme">
<input type="button" id="theme1" class="theme">
<input type="button" id="theme2" class="theme">
</div>
这将一直使用到 IE8 没有问题....http://caniuse.com/#search=localstorage
您可以将其复制粘贴到某处，它会与您当前的内容一起使用
编辑：对于想知道这里的馅饼之后整个代码库会是什么样子的人：http://pastebin.ca/3212318
【讨论】：
是的，您可以这样做。您可以使用 cookie、数据库或浏览器存储。如果你使用浏览器存储，它会是 HTML5，如果你知道你的 JavaScript，这很容易实现。否则，您有一个简单的方法，那就是使用 cookie，如果您有身份验证系统，将该 cookie 与那些在注销时删除的 cookie 分开，这样这些设置将一直保留到用户删除他们的 cookie。
Cookie，例如来自 MSDN
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
alert(cookieValue);
}
例如document.cookie = myStyle;
在此处查看完整示例 How do I create and read a value from cookie?
然后，更可取的路线，HTML 5，这里有一个例子Local Storage - HTML5 Demo with Code
编辑： 这是一个可以为你做的粘贴箱（从我来自的地方看到你在正确的方向）。 http://pastebin.ca/3211127
【讨论】：