用户自定义样式可以与document.ready + localStorage一起使用吗？

Question

我运行并积极开发了一个论坛(它本身运行在经过大量修改的SMF 1.1.16上)-我想添加的一个功能是，用户可以从页面角落的小工具中选择自定义颜色(比如2-4)，以自定义论坛的颜色。

论坛的HTML输出被组织成这样，修改颜色可以用纯CSS来完成，我想知道插入这个CSS的正确方式是什么。

我的想法是，一旦用户保存了他们的颜色信息，一段javascript将生成必要的CSS并使用HTML5 localStorage保存它(可能使用polyfill库)。然后，在$(document).ready()上，我们检查该CSS是否存在，如果存在，则将其注入到页眉中。

这种方法明智吗？它很容易开发，但在应用自定义样式之前，它是否会导致常规样式的闪烁(考虑到页面相当重量级)？

如果是这样的话，有没有更好的方法来完全在客户端做到这一点？如果可能的话，我宁愿不涉及服务器，但如果我必须的话，我可以让服务器为每个保存自定义样式的用户生成CSS文件。

最好的方法是什么？

Answer 1

我建议您首先为页面设置一个基本样式，这样就不会出现FOUC。然后，让JS加载自定义样式，对其进行解析，然后将其应用于页面。你可以做一个“淡入更改”(比如在背景中淡入等)，这样样式就不会像快照一样加载了。

您也可以首先清空页面，比如在加载样式之前将body设置为display:none，然后在应用样式之后删除display:none

您还必须注意，本地存储有其大小限制。不要加载太多。考虑寻找LZW compression in JS。这可能会有帮助。