Question

我有这些代码，其中在对话开始时，名称是随机生成的，但我想要做的是，生成的名称将在我刷新页面时保留。知道我该怎么办？

＆＃13;

function replaceName() {

    var textArray = ['Mark', 'Jane', 'Aldrin', 'Len'];
    var randomIndex = Math.floor(Math.random() * textArray.length); 
    var randomElement = textArray[randomIndex];
    var text1 = "Hi, I'm ";
    var text2 = ", How can i help you?";
    var text3 = text1.concat(randomElement,text2); 

    document.getElementById("demo").innerHTML = text3;
}

replaceName();

＆＃13;

<p id="demo">Hi, I'm Joey, How can i help you?</p>

＆＃13;

Answer 1

您可以使用localStorage.getItem('name')在刷新时获取所选名称。

function replaceName() {
  var textArray = ['Mark', 'Jane', 'Aldrin', 'Len'];
  var randomIndex = Math.floor(Math.random() * textArray.length);
  var randomElement = textArray[randomIndex];
  localStorage.setItem('name', randomElement);
  var text1 = "Hi, I'm ";
  var text2 = ", How can i help you?";
  var text3 = text1.concat(localStorage.getItem('name'), text2);
  document.getElementById("demo").innerHTML = text3;
}

replaceName();

<p id="demo">Hi, I'm Joey, How can i help you?</p>

Answer 2

尝试使用Cookie：

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}


function replaceName() {
var textArray = ['Mark', 'Jane', 'Aldrin', 'Len'];
var randomIndex = Math.floor(Math.random() * textArray.length); 
var randomElement = textArray[randomIndex];

var storedName= setCookie('username',randomElement,30); // set cookie name ,value, extime
var getName  =  getCookie('username'); //get cookie value by name and store it in getname var  
var text1    = "Hi, I'm ";
var text2    = ", How can i help you?";
var text3    = text1.concat(getName,text2);
document.getElementById("demo").innerHTML = text3;
}

replaceName();
<p id="demo">Hi, I'm Joey, How can i help you?</p>

Answer 3

乍一看，其他答案不会处理页面加载（也许他们会这样做，我错过了一些东西......）。 localStorage或cookies都很好，你选择这个问题并没有多大区别。你应该尝试两种方法，只是为了练习。

为方便起见，我添加了删除Cookie按钮（编辑：它不会删除cookie，只是将其设置为空字符串）

<script>
// either we can read a cookie
// or the cookie is empty -> then we pick a random name and set is as cookie
window.onload = function() {
  var randomname = getCookie('randomname');
  if(randomname != '') {
    setName(randomname);
  }
  else {
    setCookie('randomname', replaceName());
  }
}

function replaceName() {
  var textArray = ['Mark', 'Jane', 'Aldrin', 'Len'];
  var randomIndex = Math.floor(Math.random() * textArray.length); 
  var randomElement = textArray[randomIndex];
  setName(randomElement);
  return randomElement;           // we would like to know the name, just the name, so we can store it somewhere
}
// I take this code out of replaceName() and set it in a separate function.
// so you can use it both for setting the name from cookie as for the random name
function setName(name) {
  var text1 = "Hi, I'm ";
  var text2 = ", How can i help you?";
  var text3 = text1.concat(name, text2);
  document.getElementById("demo").innerHTML = text3;
}

function deleteCookies() {
  setCookie('randomname', '');
}

// Get and Set cookie; @see https://www.w3schools.com/js/js_cookies.asp
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
        c = c.substring(1);
     }
     if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
     }
  }
  return "";
}
</script>
<div id="demo"></div>
<input type="button" value="delete cookie" onclick="deleteCookies()"/>

我建议：尝试使用更好的名称来实现功能;确保函数的名称描述了您打算执行的操作。你注意到我把你的功能减少了一半，我做了两个功能。由于新名称和保存在cookie或localstorage中的名称都需要setName，因此将它作为单独的函数更好

javascript存储随机字符串的会话

3 个答案: