我需要缓存通过调用函数设置的每个输入的十六进制值/颜色。
我已经尝试通过重写重复的函数来缓存每种颜色来缓存负载,但是想知道是否可以使用单个函数来完成。
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)}
}
});
答案 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));
}