如何从列表中生成随机颜色？刷新后保持相同颜色是很重要的。

Question

我想为带有唯一id的标记元素分配颜色。颜色应该从列表中选择，在重新加载或刷新组件之后，标签的颜色不应该改变。我通过下面的方法通过标记id生成随机颜色，但是我找不到从特定列表中选择颜色的方法。

function hashCode(str) {
  //String#hashCode
  var hash = 0
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash)
  }
  console.log(hash)
  return hash
}

function intToRGB(i) {
  var c = (i & 0x00ffffff).toString(16).toUpperCase()

  return '00000'.substring(0, 6 - c.length) + c
}

export const colorGenerator = key =>
  intToRGB(hashCode(key)) ? `#${intToRGB(hashCode(key))}` : '#774FFF'

Answer 1

在重新加载或刷新组件后，标签的颜色不应更改

您可以将颜色保存为浏览器会话存储中的键值对--会话存储只有在选项卡打开时才会持续，因此如果函数检查并找到会话存储中的现有颜色，则可以使用它而不是随机颜色。https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

我找不到从特定列表中选择颜色的方法。

定义一个数组，其中包含列表中的所有颜色。在随机数上使用数组长度作为模。这将给出一个随机数组索引。colorList[randomIndex]会从你的列表中给出一个随机的颜色。