为缓存颜色值的函数设置本地存储

时间:2019-05-04 22:12:24

标签: javascript local-storage color-picker

我需要缓存通过调用函数设置的每个输入的十六进制值/颜色。

我已经尝试通过重写重复的函数来缓存每种颜色来缓存负载,但是想知道是否可以使用单个函数来完成。

  function boardNames(color){
        for (var i = 0; i < document.getElementsByClassName('topname').length; i++) {
            document.getElementsByClassName('topname')[i].style.color = color
        }
  }
function leaderboardMass(color){
    for (var i = 0; i < document.getElementsByClassName('topmass').length; i++) {
        document.getElementsByClassName('topmass')[i].style.color = color
    }
 }

     $('.demo').minicolors({
        change: function(value) {
          if(this.id === 'bn-theme-e'){boardNames(value)}
          if(this.id === 'lm-theme-e'){leaderboardMass(value)}

        }
    });

1 个答案:

答案 0 :(得分:0)

您可以在localStorage内存储一个字符串化的对象。这样,您可以使用和索引多种不同的颜色。在我的示例中,我使用元素类名称来存储颜色值的索引。

// Color all items that have been set
boardNames = () => {
  let colors = JSON.parse(localStorage.getItem('nc'));
  if (colors) {
    Object.entries(colors).forEach(([k, v]) => {
      Array.from(document.getElementsByClassName(k)).forEach(c => {
        c.style.color = v;
      });
    });
  }
  localStorage.setItem('nc', JSON.stringify(colors));
}

// Set the className with new color value
setBoardColor = (className, color) => {
  let colors = JSON.parse(localStorage.getItem('nc'));
  colors[className] = color;
  localStorage.setItem('nc', JSON.stringify(colors));
}