时间戳

首页 > 解决方案 > 为缓存颜色值的函数设置 localstorage

javascript - 为缓存颜色值的函数设置 localstorage

问题描述

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

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

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

        }
    });

标签： javascriptlocal-storagecolor-picker

解决方案

您可以将字符串化对象存储在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));
}

推荐阅读