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);
}

问题是：

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

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

最好使用＆＃34; Cookie＆＃34; 或＆＃34;本地存储＆＃34; ？

Answer 1

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

Blob

Answer 2

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

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

来自Local Storage的代码

更改样式表并将其保存到＆＃34; Cookies /本地存储＆＃34;

2 个答案: