node.jsとsocket.io - ページをリロードするとクライアント側へのメッセージが消えます

Question

node.jsとsocket.ioでリアルタイムチャットWebアプリケーションを構築していて、メッセージはjQueryを使用してクライアント側に正常に追加できますsocketはサーバーからデータを出力します。しかし、ユーザーがページをリロードするたびに、メッセージはすべて消えてしまいます。私はまた.loadと.htmlを試してみましたが、これと同じ問題ですが、これを解決するためのエレガントな方法はありますか？ありがとう。

socket.on('message', function(data) { $('#messageArea').append('<div>' + data + '</div>'); });

キャッチされない例外TypeError：messages.forEachは関数ではありません

 if (localStorage.getItem('data') !== null) { 
     var username = localStorage.getItem('username', data.username); 
     var messages = localStorage.getItem('message', data.message); 
     if (messages) { 
      messages.forEach(function(username, message) { 
       $('#chatArea').append('<div>' + username + ' : ' + message + '</div>'); 
      }); 
      console.log(typeof(messages)); // string 
      console.log(typeof(message)); // obj 
      console.log(messages); // some text input 
     } 
    } 

サーバー側

 // Send Message From Server 
    socket.on('send message', function(message, username, date) { 
     io.sockets.emit('show message', message, username, date); }); 

クライアントサイド

 // Show Message 
socket.on('show message', function(username, message, date) { 

    if (typeof(Storage) !== "undefined") { 

     if (message) { 
      var messages = localStorage.getItem('message'); 
      messages += ';' 
     } 
     messages += message; 
     localStorage.setItem('username', username); 
     localStorage.setItem('message', messages) || ''; 
     localStorage.setItem('date', date); 

     messages.split(';').each(function() { 
      $('#chatArea').append('<div class="well well-sm">' + localStorage.getItem('username') + ' : ' + localStorage.getItem('message') + ' <span class="pull-right"><small id="date"> at ' + localStorage.getItem('date') + '</small></span></div>'); 
     }); 


    } else { 
     $('#chatArea').append('<div>The Storage is not working in this browser</div>'); 
    } 
}); 

Answer 1

一つのSi localStorageで高速なソリューションを提供します。他のストレージまたはデータベースを使用することができます。

$(document).ready(function() { 
    var messages = localStorage.getItem('msg'); 
    if (messages) { 
    messages.split(';').forEach(function(msg) { 
     $('#messageArea').append('<div>' + msg + '</div>'); 
    }); 
    } 
}); 

socket.on('message', function(data) { 
    var messages = localStorage.getItem('msg') || ''; 
    if (messages) { 
    messages += ';'; 
    } 
    messages += data; 
    localStorage.setItem('msg', messages); 
    $('#messageArea').append('<div>' + data + '</div>'); 
}); 

この回答では、「;」を使用しないことがあります。メッセージに例のように、メッセージデータをどこかに保存する必要があることを示しています。