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>

现在，我想在刷新/重新打开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 - 只是本地存储）

1 个答案: