在 React 中使用页面刷新生成相同的随机颜色

Question

In my application, I assign the same random color for the background color of the same uniqueID and I also want this color to be the same random color if the page reloads.

My approach and current behavior is similar to the solution in this prior post: Generate Random Same Colors in React however, the colors change if the page is reloaded .

Question: Is there a way to map the uniqueID to a random color, and have it persist different instances of my app using REACT?

See below my current code:

function getRandomColor(): string{
  return '#' + Math.floor(Math.random()*16777215).toString(16);
}
let colorMap = new Map<number, string>();
function setColor(uniqueId: number): string{
  if(colorMap.get(uniqueId) == null){
    colorMap.set(uniqueId,getRandomColor());
  }
  return colorMapping.get(id) + "";
}
//later in the code
color: setColor(Number(d_id)),

Answer 1

You could use one of the various storage options to store this and then restore on each page load:

• Cookies
• Session
• LocalStorage