LocalStorageを使って入力した値をフォーム内に表示し続ける方法がわかりません

##フォームに入力したテキストをLocalStorageを使って保存・表示させたい
■目標動作
1,フォームにテキストを入力
2,エンターキーで保存(保存ボタンは配置しない)
3,入力されたテキストがlocalStorageで保存される
4,フォーム内にそのままテキストが表示されている状態にする
5,再度上書きで入力した場合2に戻る
※ページ内にフォームが多数存在するため保存されたデータが混合しないようにする必要あり


案としては、Lhankor_Mhyさんにコメントでいただいた[ローカルストレージ参考サイト](https://team-lab.github.io/skillup-nodejs/1/6.html)の情報を使おうと考えています。


◆[サンプル](http://portfoliotukapon.web.fc2.com/html/test2.html)
そこでお聞きしたいのが、上記参考サイトですと追加ボタンを押すことでフォーム内には保存されずフォームの下に書き出されてしまいます。
これを
- 保存されたデータをフォームの下に表示する挙動を、そのままフォーム内に表示する挙動に変更
- 「追加ボタン」を押すことで保存される挙動を「エンターキー」を押すことで保存される挙動に変更（追加ボタン撤去）
- フォームが複数個あっても動くように変更

としたいです。この書き方がわからないためご教示願います。

__※[参考サイト](https://team-lab.github.io/skillup-nodejs/1/6.html)にもソースコードの記載がありますが、下記にも記載します。__
```html
<!DOCTYPE html>
<html>
<head>
  <title>localStorageのサンプル</title>
</head>
<body>
  <div id="form">
    <input id="formText" type="text" size="50">
    <input id="formButton" type="button" value="追加">
  </div>
  <div id="list"></div>

  <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
  <script src="local_test.js"></script>
</body>
</html>
```
```js
$(loaded);

function loaded() {
  showText();
  // ボタンをクリックしたときに実行するイベントを設定する
  $("#formButton").click(
    // コールバックとしてメソッドを引数にわたす
    function() {
      saveText();
      showText();
    });
}

// 入力された内容をローカルストレージに保存する
function saveText() {
  // 時刻をキーにして入力されたテキストを保存する
  var text = $("#formText");
  var time = new Date();
  localStorage.setItem(time, text.val());
  // テキストボックスを空にする
  text.val("");
}

// ローカルストレージに保存した値を再描画する
function showText() {
  // すでにある要素を削除する
  var list = $("#list");
  list.children().remove();
  // ローカルストレージに保存された値すべてを要素に追加する
  var key, value, html = [];
  for(var i=0, len=localStorage.length; i<len; i++) {
    key = localStorage.key(i);
    value = localStorage.getItem(key);
    html.push($("<p>").text(value));
  }
  list.append(html);
}
```