如何将属性保存在 html 中（无 cookie - 仅本地存储）

Question

我有一个日历，其中的日期是可点击的。每次单击它都会更改颜色（默认为白色，红色和绿色 - 循环）。

    <script type="text/javascript">

function inArray(needle, haystack) {
    if (!needle || !haystack) {
        return false;
    }
    else {
        var notFound = -1;
        for (var i = 0, len = haystack.length; i < len; i++) {
            if (haystack[i] == needle) {
                return i;
            }
        }
        return notFound;
    }
}

function colorToggle(el, colors) {
    if (!el) {
        return false;
    }
    else {
        var colors = colors || [
            'rgb(255, 0, 0)',
            'rgb(0, 255, 0)',
            'rgb(0, 0, 255)'],
            wGCS = window.getComputedStyle,
            curColor = wGCS(el, null).backgroundColor;
        var pos = inArray(curColor, colors);
        if (pos > -1 && pos < (colors.length - 1)) {
            el.style.backgroundColor = colors[inArray(curColor, colors) + 1];
        }
        else if (pos > -1 && pos == (colors.length - 1)) {
            el.style.backgroundColor = colors[0];
        }
    }
}

var buttons = document.querySelectorAll('button.colorToggle');

for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)';
    buttons[i].onclick = function() {
        colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']);
    };
}

</script>

现在，我想保留 refresh/reopening index.html 页面之后的颜色。

感谢您的帮助。

Answer 1

您首先需要为每个元素分配一个 id 或 data- 属性，以便您可以将存储的颜色值与重新加载页面时分配给它们的元素相关联.例如，让我们使用每个单元格的 ISO 日期作为标识符。

日历中的每个日期单元格可能如下所示：

<button data-date="2015-09-01" class="colorToggle">1</button>
<button data-date="2015-09-02" class="colorToggle">2</button>

然后，在 colorToggle 中，您可以像这样将数据保存到 localStorage：

localStorage.setItem(el.getAttribute("data-date"), el.style.backgroundColor);

在页面加载时，您可以通过首先检索节点然后尝试从 localStorage 中拉出颜色并重新分配颜色来重置颜色。

var nodes = Array.prototype.slice.call(document.querySelectorAll("[data-date]"));
nodes.forEach(function (node) {
  var date = node.getAttribute("data-date");
  var color = localStorage.getItem(date);
  if(color) {
    node.style.backgroundColor = color;
  }
});

最后一点，我强烈建议为 ES5 Array.prototype 方法包含一个 polyfill。这将使您能够访问上面示例中的 forEach，并允许您将 inArray 替换为 Array.prototype.indexOf。

如何将属性保存在 html 中（无 cookie - 仅本地存储）

how to keep attributes saved in html (no cookies - just local storage)

javascript

html

storage