更改样式表并将其保存到“Cookies / 本地存储”

Question

我有两个样式表

<link href="design/default.css" rel="stylesheet" type="text/css" title="default">
<link href="design/new.css" rel="stylesheet" type="text/css" title="new">

我有按钮来改变这些样式表：

<button class="" onclick="swapStyleSheet('design/default.css')">Default</button>
<button class="" onclick="swapStyleSheet('design/new.css')">New</button>

当然还有交换这些样式表的 javascript。

    function swapStyleSheet(sheet){
       document.getElementById('design').setAttribute('href', sheet);
}

问题是：

如何保存用户点击的样式表？使用 Cookies / 本地存储。

即使用户离开我的页面并在 4 天后回来。

使用 "Cookies" 还是 "Local storage" 更好？

Answer 1

在window 的load 事件中定义一个变量来存储对Blob URL 的引用。如果localStorage 有键，例如"styles"，从localStorage 获取css，创建一个Blob，将localStorage.getItem("styles") 设置为第一个参数的可迭代元素，type 设置为"text/css"。将Blob 传递给URL.createObjectURL() 以设置#design .href 的值。否则，在swapStyleSheet 调用中过滤document.styleSheets 以匹配sheet 参数的.href，从.rules 属性查找中创建get .cssText，设置为Blob，执行上述过程。

window.onload = function() {
  let blob, url;

  function setStyle() {
    var sheet = localStorage.getItem("styles");
    blob = new Blob([localStorage.getItem("styles")], {type:"text/css"});    
    url = URL.createObjectURL(blob);
    document.getElementById("design").setAttribute("href", url);
  }

  if (localStorage.getItem("style") != null) setStyle();

  function swapStyleSheet(sheet) {

    var rules = Array.prototype.filter.call(document.styleSheets, function(styles) {
      return styles.href.indexOf(sheet) !== -1
    })[0].rules;

    for (var i = 0, css = ""; i < rules.length; i++)  css += rules[i].cssText;

    if (url) URL.revokeObjectURL(url);

    localStorage.setItem("styles", css);

    setStyle();

  }
}

Answer 2

loalStorage 将持续到客户端的缓存被清除，您可以非常轻松地设置或获取该值。

 // Store
 localStorage.setItem("lastname", "Smith");
 // Retrieve
 document.getElementById("result").innerHTML = localStorage.getItem("lastname");

来自Local Storage的代码