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

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

    <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页面后保留颜色

---

谢谢您的帮助。

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

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

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

在页面加载时，您可以通过首先检索节点，然后尝试从本地存储中提取颜色并重新分配颜色来重置颜色

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，并允许您使用Array.prototype.indexOf替换inArray

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