Question

我的老师告诉我们，我们可以使用“ localstorage”和数组保存用户名（要求用户在提示符下输入昵称），因为他希望即使重新加载页面也要保存用户名（对不起）对于我破碎的英语，英语不是我的母语，而且我也是javascript的新手）：

html:
<!doctype html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>

    $(function() {
    var socket=io();
    var nick = prompt("Cual es tu nombre");
    socket.emit('nombre', nick);
    $("form").submit(function(e){
        e.preventDefault();
        socket.emit('chat message', $("#m").val());
        $("#m").val('');
        return false;
    });

    socket.on('chat message',function(msg){
        $("#messages").append($("<li>").text(msg));
    });
});

Js：

</script>
</body>
</html>

var app=require('express')();
var http=require('http').Server(app);
var io=require("socket.io")(http);
var puerto=8000;

app.get('/',function(req,res){
    res.sendFile(__dirname+'/index.html');
});

io.on('connection',function(socket){
    socket.on('nombre', (username) =>  {
        socket.username = username;
        console.log('Usuario' + socket.username + 'se conecto')
    });
    //usamos un callback para notificar que una conexion
    console.log('usuario conectado'+socket.username);
    socket.on('disconnect',function(){
        console.log("Usuario se desconecto");
    });

    socket.on('chat message',function(msg){
        console.log(socket.username + " dijo: ", msg);
        io.emit('chat message',socket.username + " dijo: "+msg);
    });
});

http.listen(puerto,function(){
    console.log("Escuchando puerto " +puerto);
});

Answer 1

您可以从字面上做到

localStorage.set('userName', NAME_HERE);

所以就您而言

socket.on('nombre', (username) =>  {
    socket.username = username;
    localStorage.set('Usuario', socket.username);
});

Answer 2

您可以使用localStorage保存用户昵称，并使用此数据检查用户昵称是否存在。

$(function () {
  var NICK_NAME_KEY = 'nickName';
  var socket = io();
  var nick = localStorage.getItem(NICK_NAME_KEY); // first of all, try to get last nickname from localStorage
  if (!nick) { // if do not have nickname in localStorage,
    // this mean this is the first time user enters your system
    nick = prompt("Cual es tu nombre"); // ask user nickname
    localStorage.setItem(NICK_NAME_KEY, nick); // save user nickname to localStorage,
    //if user reload page, we will have nickname in localStorage, the system will not ask their nickname again.
  } else {
    // nickname has already
  }
  socket.emit('nombre', nick);
  $("form").submit(function (e) {
    e.preventDefault();
    socket.emit('chat message', $("#m").val());
    $("#m").val('');
    return false;
  });

  socket.on('chat message', function (msg) {
    $("#messages").append($("<li>").text(msg));
  });

  // create a logout `button`, when user click the button, just remove their data (nicknam) and reload page
  $('#logout').on('click', function() {
    localStorage.removeItem(NICK_NAME_KEY);
    location.reload();
  })
});

我需要使用localstorage保存用户名

2 个答案: