javascript - 如果未设置 cookie，则检查数组是否有重复值，不检查是否设置了 cookie

Question

我正在开发一个聊天室页面，您首先要在该页面上设置您的用户名，然后它会在 cookie 中设置用户名值。在此之后，它会加载不同的输入框，您可以从中实时发送消息。此时你可以重新加载页面，它会给你一个弹出窗口，显示一条欢迎回来的消息，其中包含保存在 cookie 中的名称值，这也会再次将其设置为用户名并加载聊天页面。

问题是我希望能够防止从用户名设置输入字段中设置多个重复的名称，但允许通过 cookie 在数组中多次设置用户名。

此函数设置原始用户名:

//index.html
function setUsername() {
    var textbox = document.getElementById("name");
    var txtboxval = textbox.value;
    if(textbox.value.length <= 20 && textbox.value.length >= 4){
      socket.emit('setUsername', document.getElementById('name').value);
      setCookie("username", txtboxval, 30);
      socket.on('userExists', function(data) {

      });
    }
    else{
        alert("The name has to be at least 4 characters long");
        return false;
      }
    };

这两个将其设置为加载 cookie:

  //index.html
  function setUsername2() {
    var nimi = getCookie('username');
    socket.emit('setUsername', nimi);
  }

  function checkCookie() {
      var user = getCookie("username");
      if (user != "") {
          alert("Welcome again " + user);
          setUsername2();
          document.body.innerHTML = '<div class="wrapper"><div class="messagebox"><input type = "text" id = "message" placeholder = "Write your message here">\
          <button type = "button" id="sending" name = "button" onclick = "sendMessage()">Send</button></div>\
          <div id = "message-container"></div></div>';
      }
    }

现在这里实际上将用户名设置到它从 index.html 页面上挖掘的数组中:

  //app.js
  users = [];
  io.on('connection', function(socket){
    console.log('an user connected');
    console.log(users);
    socket.on('setUsername', function(data) {
      console.log(data);

        users.push(data);
        socket.emit('userSet', {username: data});
        console.log(users);
  });

我希望这段代码在首次设置用户名时运行，但在从 cookie 加载时不运行:

//app.js
if(users.indexOf(data) > -1) {
          socket.emit('userExists', data + ' Username is already taken.');
        } else {
          users.push(data);
          socket.emit('userSet', {username: data});
          console.log(users);
        }

为什么我无法让它按我希望的那样工作，我是否遗漏了什么？如果有什么不清楚的地方，请询问。

Answer 1

您可以使用对象 {name: string, cookie: boolean} 而不是仅使用用户名来触发您的 'setUsername' 来完成此操作，就像我在这里所做的那样:

function setUsername() {
  var textbox = document.getElementById("name");
  var txtboxval = textbox.value;
  if(textbox.value.length <= 20 && textbox.value.length >= 4){
    socket.emit('setUsername', {name: document.getElementById('name').value, cookie: false});
    setCookie("username", txtboxval, 30);
    socket.on('userExists', function(data) {
      // ########## you could add your 'already taken'-message here. :) ##########
      console.log(data);
      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 
      // this 'deletes' the cookie.
    });
  } else {
    alert("The name has to be at least 4 characters long");
    return false;
  }
}

---

function setUsername2() {
  var nimi = getCookie('username');
  socket.emit('setUsername', {name: nimi, cookie: true});
}

function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
    setUsername2();
    document.body.innerHTML = '<div class="wrapper"><div class="messagebox"><input type = "text" id = "message" placeholder = "Write your message here">\
    <button type = "button" id="sending" name = "button" onclick = "sendMessage()">Send</button></div>\
    <div id = "message-container"></div></div>';
  }
}

---

users = [];
io.on('connection', function(socket){
  console.log('an user connected');
  console.log(users);
  socket.on('setUsername', function(data) {
    console.log(data);

    if(!data.cookie && users.indexOf(data.name) > -1) {
      socket.emit('userExists', data.name + ' Username is already taken.');
    } else {
      users.push(data.name);
      socket.emit('userSet', {username: data.name});
      console.log(users);
    }
  });
});