Question

我有一些样式表但是如何让用户保存自上次在网站上的自定义样式表？我可以在Jquery和HTLM5中做到吗？

Answer 1

是的，你可以这样做。您可以使用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);
}

e.g。 document.cookie = myStyle;

请在此处查看完整示例How do I create and read a value from cookie?

然后，更优选的路线，HTML 5，其中一个例子是Local Storage - HTML5 Demo with Code

修改这是一个可能为你做的一个pastebin（告诉你我从哪里来的正确方向）。 http://pastebin.ca/3211127

Answer 2

有很多不同的方法可以做到这一点，但是如果你不想用太多的数据库/ cookie来淹没你的服务器（假设你后端没有认证系统）那么你可以保存一个类......所以......你需要做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

如何让用户保存自定义样式表设置

2 个答案: