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

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