更改样式表并将其保存到 "Cookies / Local storage"

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 天后回来。

Is better to use "Cookies" or "Local storage" ?

Answer 1

loalStorage 将持续到客户端的缓存被清理为止，您可以很容易地设置或获取该值。

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

代码来自 Local Storage

Answer 2

在 window 的 load 事件中定义一个变量来存储对 Blob URL 的引用。如果 localStorage 有键，例如 "styles"，从 localStorage 得到 css，创建一个 Blob，localStorage.getItem("styles") 设置为 iterable 的元素第一个参数，type 设置为 "text/css"。将 Blob 传递给 URL.createObjectURL() 以设置 #design .href 的值。否则，为 .href 过滤 document.styleSheets 匹配 swapStyleSheet 调用中的 sheet 参数，从 .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();

  }
}

更改样式表并将其保存到 "Cookies / Local storage"

Change Stylesheet and save it to "Cookies / Local storage"

html

javascript

cookies

stylesheet

local-storage