Question

我应该让用户通过更改CSS文件来更改网站的样式。之后，用户选择将保存在cookie中（至少一周），并在用户下次访问网站时加载。我设法让代码工作，允许用户更改CSS文件，但我对如何使用cookie进行了一些线索。

这是我的代码：

HTML

<link id="stylesheet_1" href="inlamning7_utseende1.css" type="text/css" rel="stylesheet" title="default">
    <link id="stylesheet_2" href="inlamning7_utseende2.css" type="text/css" rel="alternate stylesheet2" title="dark">
    <link id="stylesheet_3" href="inlamning7_utseende3.css" type="text/css" rel="alternate stylesheet3" title="pastell">
    <link id="stylesheet_4" href="inlamning7_utseende4.css" type="text/css" rel="alternate stylesheet4" title="gray">

和

<a id="style_1" class="left_sub8" onclick = "changeCSS('inlamning7_utseende1.css')" >Default</a>
<a id="style_2" class="left_sub8" onclick = "changeCSS('inlamning7_utseende2.css')">Dark</a><br>
<a id="style_3" class="left_sub8" onclick = "changeCSS('inlamning7_utseende3.css')">Pastell</a><br>
<a id="style_4" class="left_sub8" onclick = "changeCSS('inlamning7_utseende4.css')">Gray</a><br>

Javascript（允许用户切换CSS文件）

function changeCSS(sheet) {
    document.getElementById('stylesheet_1').setAttribute('href', sheet);
}

Javascript（Cookie代码）

function createCookie(cssName,value,days) {
  var exDate = new Date();
  exDate.setDate(exDate.getDate() + days);
}

function readCookie(cssName) {
  var cookie = document.cookie;
}

Cookie的javascript代码是我提供的一个示例，它代表了我认为如何处理我的问题的好方法。我想当用户选择样式表时需要创建一个cookie。然后，下次访问时，网页需要读取cookie。因此，选择了两个函数createCookie和readCookie。我不应该使用jQuery，该解决方案应该适用于Chrome，Firefox和Internet Explorer。

换句话说，网页应该保存所选最后一个样式表的文件名并将其保存到cookie中。加载后，页面应检查cookie是否存在并相应地更改样式表。

你们中的任何人都知道如何解决我的问题吗？先感谢您！并随时请我澄清是否有任何不清楚的事情！

Answer 1

我会看看mozilla's cookie framework。但基本上要创建/更新cookie，请执行以下操作：

function setCookie(name, value, expires) {
    if (!name || /^(?:expires|max\-age|path|domain|secure)$/i.test(name)) { return false; }
    var sExpires = "";
    if (expires) {
      switch (expires.constructor) {
        case Number:
          sExpires = expires === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + expires;
          break;
        case String:
          sExpires = "; expires=" + expires;
          break;
        case Date:
          sExpires = "; expires=" + expires.toUTCString();
          break;
       }
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires;
    return true; // true means it succeeded whereas false means it failed to set
}

要阅读cookie，请执行以下操作：

function getCookie(name) {
    if (!name) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}

保存用户在cookie中选择样式表的选项

1 个答案: