alert内にstorageの全データ表示

Question

実現したいこと

alert内にfor文を使用してstorsgeの全データを表示したい。
（for文を使用して取得した全データの仮置き場？（変数）？を作る？）

現状

下記のコードの通り取得したデータの仮置き場？（変数）？がない為、表示としては最後の値が表示されている。

function demo(){
 for(var i = 1; i < localStorage.length; i++){
        var key    = localStorage.key(i);
        var all    = localStorage.getItem(key);
}
 alert(key);
}

そもそも可能なのかもわからないのですが、お知恵をお借りしたいです。
欲を言うのもなんですが、取得したデータには改行(\n)をつけれると幸いです。

Answer 1

そもそも、localstorage関係なく、ループと変数の基本部分で間違えています。

 for(var i = 1; i < localStorage.length; i++){
        var key    = localStorage.key(i);    //＝なので毎回代入・上書きされる
        var all    = localStorage.getItem(key);//＝なので毎回代入・上書きされる
}

ここの認識間違いが改められれば「改行(\n)をつけ」というのもそう難しくないものと思います。

Comments

[syosinsyascript]

なるほど、毎回上書きされるため、最後の値だけ出力するのですね。ありがとうございます。どのようにしたら全データの取得ができるのでしょうか？

Answer 2

そもそも可能なのかもわからない

そういう時は、臆することなく試します。

開発者コンソール（Consoleタブ）

var str = "aaa\nbbb\nccc";
alert( str ); // PCブラウザでは複数行が表示された（スマホでは未確認です）

// "aaa\nbbb\nccc" は配列から作ることもできる
console.log( ["aaa","bbb","ccc"].join("\n") === str ); // true

alert内にstorageの全データ表示

ブラウザ実装によるところが大きいため、実行するブラウザやデータ量によって表示しきれません。
簡易的な確認であれば、上記の実験を踏まえて、for 文の中で文字列配列を作ります。

function demo(){
  var msg = []; // 文字列配列
  for(var i = 1; i < localStorage.length; i++){
    var key    = localStorage.key(i);
    var all    = localStorage.getItem(key);

    msg.push( `${key}:${all}` );
  }
  alert( msg.join("\n") );
}

Comments

[syosinsyascript]

(\n)の確認取れました。ありがとうございます。