【チャットアプリ/ローカルストレージ】自身の発言と他人の発言でアイコンを変えたいのですが、うまくできません。。

Question

![イメージ説明]WIDTH:458
プログラミング歴2ヶ月の初心者です。教えてください！

###前提・実現したいこと
複数人で同時使用できるチャットを作っています。
デザインは概ねLINEを模していますが、自身の発言にも相手の発言にもアイコンがつきます。
アイコンはtwitterから引っ張ってきています。

###発生している問題・エラーメッセージ
当然、自身の発言は自分のアイコン、他の人の発言はその人のアイコンが表示されるようにしたいのですが、何故か表示が全て自身のアイコンとなってしまいます。
他ユーザーも、入力したアカウントのアイコンはちゃんととれるのですが、全ての投稿が同じアイコンになってしまいます。
原因とともに解決策をお教え頂けると大変ありがたいです！

流れとしては、
1．入力欄にアカウントを入力しメッセージ送信ボタンを押すとアカウントをローカルストレージに保存
2．メッセージ表示の際、ローカルストレージから読みだしたその文字列を変数に入れる
3．twitterアイコン取得のurlに変数を流す
4．取得したアイコンをチャット欄に挿入

###ソースコード(一部省略)

//1.送信ボタンでアカウントを保存
function sendText(text){
  localStorage.setItem( "name" , $("#username").val() );
}

//2.アカウントを変数に代入
var name;
name = localStorage.getItem("name");

//3.twitterアイコン取得
var icon = 'http://www.paper-glasses.com/api/twipi/' + name + '/original' ;

//4.アイコンをチャット欄に挿入(自身の発言と他人の発言はローカルストレージのnameが同一かどうかで見分ける)
function addText(text){
  if(text.name == localStorage.getItem("name")){
    $("#board").append('<li class="mylist">' +
                        '<span class="myname">' + '<img class="icon" src="'+icon+'">' +
                        '<span class="mydate"><span class="txt">' +text.input_date+ '</span></span></span>' +
                        '<span class="mymsg">' +text.message+ '</span></li>')
  } else {
    $("#board").append('<li class="yrlist">' +
                        '<span class="yrname">' + '<img class="icon" src="'+icon+'">' +
                        '<span class="yrdate"><span class="txt">' +text.input_date+ '</span></span></span>' +
                        '<span class="yrmsg">' +text.message+ '</span></li>')
  }

他人が投稿する際はその他人のローカルストレージのnameを代入したurlから画像をとってくるのでそれぞれ表示されると思ったのですが、、
勉強中のひよっこです。教えてください！

Answer 1

同一のアイコン画像を利用してませんか?

var icon = 'http://www.paper-glasses.com/api/twipi/' + name + '/original' ;

は書き換えていないように見えますが・・・

Comments

[退会済みユーザー]

コメントありがとうございます。
var nameはローカルストレージから値をとってきています。
私が自身のPC(ブラウザ)で操作するときは私のローカルストレージに入った私のアカウント名が、
他の方がその方のPCで操作するときはその方が入力したアカウント名がnameに入るので、
var icon = 'http://www.paper-glasses.com/api/twipi/' + name + '/original' ;
のnameの中身は勝手に変わっているはずだと思っています。
他人がsendしたらその方のアイコンが取得され、addのif文で他人の発言だと見分けてそのアイコンが自分の画面に挿入される。
どこをどうすれば良いのでしょうか。考え方だけでも結構ですので、お教え頂けると大変ありがたいです。

[orange0190]

name = localStorage.getItem("name")で持ってきた値はただの文字列であり、いくらlocalStorageの中身が変わろうと、勝手に変化したりはしません。
ですので、addTextの中でiconを変える必要があります。
addTextの一番最初に
icon = 'http://www.paper-glasses.com/api/twipi/' + localStorage.getItem("name") + '/original' ;
としてあげるといいのではないでしょうか。

[orange0190]

ああ、少々勘違いしてました。
chiku_さんの言うとおり、localStorageはそれぞれの端末のブラウザ毎に保存されるので、端末が別だと共有されません。
ですので、サーバ側に保存する仕組み(データベースなど)が必要になります。

[退会済みユーザー]

なるほど、理解いたしました。
localstorageからとっている限りできないということですね。
ありがとうございます！

Answer 2

localStorageは端末毎で保存され、共有されないという事は理解されていますでしょうか？
localStorage.getItem("name")としても、自分の端末の場合は自分のname、他人の端末の場合は他人のnameしか取得できません。

Comments

[退会済みユーザー]

なるほど、理解いたしました。
localstorageからとっている限りできないということですね。
ありがとうございます！