时间戳

首页 > 解决方案 > 如何阻止随机名称生成器在刷新时更改名称？

html - 如何阻止随机名称生成器在刷新时更改名称？

问题描述

我正在构建一个随机名称生成器，以便在网站页面加载时出现一个随机名称。我在编码方面没有那么有经验，所以请多多包涵。

我试过使用 localStorage 和 sessionStorage。

const firstNames = ["Emily","Hannah","Madison","Ashley","Sarah","Alexis","Samantha","Jessica","Elizabeth","Taylor","Lauren","Alyssa","Kayla","Abigail","Brianna","Olivia","Emma","Megan","Grace","Victoria","Rachel","Anna","Sydney","Destiny","Morgan","Jennifer","Jasmine","Haley","Julia","Kaitlyn","Nicole","Amanda","Katherine","Natalie","Hailey","Alexandra"];

const getRandomNumber = (max) => Math.floor(Math.random() * max);

const getRandomName = () =>
`${firstNames[getRandomNumber(firstNames.length)]}`;

document.getElementById('random-name').innerText = getRandomName();

标签： htmlcss

解决方案

您可以在返回 getRandomName 函数之前将生成的名称保存在 localStorage 或 sessionStorage 中。存储后检查您的名称是否已在存储中可用，如果是，则使用它，否则生成将其保存到存储然后使用它。

const firstNames = ["Emily","Hannah","Madison","Ashley","Sarah","Alexis","Samantha","Jessica","Elizabeth","Taylor","Lauren","Alyssa","Kayla","Abigail","Brianna","Olivia","Emma","Megan","Grace","Victoria","Rachel","Anna","Sydney","Destiny","Morgan","Jennifer","Jasmine","Haley","Julia","Kaitlyn","Nicole","Amanda","Katherine","Natalie","Hailey","Alexandra"];

const getRandomNumber = (max) => Math.floor(Math.random() * max);

const getRandomName = () => {        
window.localStorage.name = window.localStorage.name || firstNames[getRandomNumber(firstNames.length)];
return window.localStorage.name;
}

document.getElementById('random-name').innerText = getRandomName();
Name: <span id="random-name"></span>

`

推荐阅读