如何让用户保存自定义样式表设置[重复]

Posted 2023-02-22

【中文标题】如何让用户保存自定义样式表设置[重复]

【英文标题】：How to let a user save custom stylesheet settings [duplicate]

【发布时间】：2016-01-21 06:43:45

【问题描述】：

我有一些样式表，但是如何让用户保存他们上次访问网站时的自定义样式表？我可以用 Jquery 和 HTLM5 来做吗？

【问题讨论】：

取决于...您是否可以在某些时候完全删除它（清除本地存储）

@mevius 我不会认为这是任何东西的重复，除非您可以专门找到一个询问如何保存样式表的问题，这就是关于，样式表选择，而不是 cookie ......随意删除此评论一旦阅读。

我也不同意它是一个骗子，至少它可能是一个骗子

@Akidus 见***.com/questions/29986657/…

@rnevius，当 OP 根本没有询问任何关于 cookie 的问题时，这不可能是关于设置/获取 cookie 的问题。

【参考方案1】：

有很多不同的方法可以做到这一点，但如果你不想用过多的数据库/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

【讨论】：

你看到文件了吗？

这里：dropbox.com/sh/2oo2v7o6wy2i975/AACyV-uIAAzXg7lztOit91hwa?dl=0

我也在想，我可能想要多两个，甚至更多的主题。代码还能用吗？

我下载了 jquery.cookie，如果这有帮助的话。

@Akidus 我肯定会让它工作的，是的，只要模式保持不变。毕竟编码就是模式

【参考方案2】：

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

【讨论】：

酷，我有点想要它快速、简单和更少的空间/代码。更多的空间/代码。

@Akidus 为什么空间/代码更少

好吧，所以我的代码在 index.html 上并不混乱。使用多种语言时不会杂乱无章。

最少的编码，最简单？在您的 jquery 中，当他们选择样式时，无论您拥有什么功能，都会在此处更新存储，在本例中是 cookie。生病添加一些 sn-ps 让您知道要添加什么。

@BrianThomas 甚至更好地将一个类保存到 localstorage，该类在加载到根区域时应用，然后根据根上的 css，定义应该在其他地方应用的主题