ローカルの掲示板作ってみました

ローカルストレージって興味はあったんだけどなかなか

手が出せていなくて。初心者にはハードルが高いかなと

思っていたら案外すんなりいけたので、ローカル掲示板なんか

組んでみました。

というより、ここの課題ですが・・・。
ただ業務系のアプリ組むときでも面白そうなことができそうかなぁと
思いつつ。
まぁへっぽこプログラマなんでダメダメソースですがね

まずはHTML

＜!DOCTYPE html＞
＜html＞
＜head＞
  ＜title＞localStorageのサンプル＜/title＞
  ＜script src="http://code.jquery.com/jquery-2.0.0.min.js"＞＜/script＞
  ＜script src="test2.js"＞＜/script＞
  ＜link rel="stylesheet" href="test2.css" type="text/css"＞
＜/head＞
＜body＞
  ＜div id="form"＞
    ＜input id="clearButton" type="button" value="全クリア"＞
    ＜ul＞
      ＜li class="name"＞
        ＜label for = "name"＞名前＜/label＞
        ＜input id="formName" type="text" size="20" maxlength="20"
         placeholder="氏名をここに入力してください。"＞
      ＜/li＞
      ＜li class="post"＞
        ＜label for = "post"＞投稿内容＜/label＞
        ＜textarea id="formText" cols="50" rows="2" maxlength="100"
        placeholder="ここに投稿内容を入力してください。"＞＜/textarea＞
        ＜input id="formButton" type="button" value="投稿する"＞
      ＜/li＞
    ＜/ul＞
  ＜/div＞
  ＜div id="list"＞＜/div＞
＜/body＞
＜/html＞

続いてJS

$(loaded);
function loaded() {
    if(window.localStorage){
      showText();
      // ボタンをクリックしたときに実行するイベントを設定する
      $("#formButton").click(
        // コールバックとしてメソッドを引数にわたす
        function() {
          saveText();
          showText();
        });
      }else{
        alert("本アプリ未対応のブラウザです。対応ブラウザをご利用ください。");
    }
}

//全クリアボタン挙動
  $("#clearButton").click(
    function() {
 localStorage.clear();
        showText();
    });

// 入力された内容をローカルストレージに保存する
function saveText() {
  // 時刻をキーにして入力されたテキストを保存する
  var name = $("#formName");
  var text = $("#formText");
  var time = new Date();
  //投稿日時
  var postdate = time.getFullYear()+ "/" +
 ( "0"+( time.getMonth()+1 ) ).slice(-2)+ "/" +
 ( "0"+time.getDate() ).slice(-2) + " " +
 ( "0"+time.getHours() ).slice(-2)+ ":" +
 ( "0"+time.getMinutes() ).slice(-2)+ ":" +
 ( "0"+time.getSeconds() ).slice(-2);
  var val = postdate +"  " + name.val() +"  " + text.val();
  // 入力チェックをしてからローカルストレージに保存する
  if(checkText(val)) {
    localStorage.setItem(time, val);
    // テキストボックスを空にする
    name.val("");
    text.val("");
  }
}

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

// 文字をエスケープする
function escapeText(text) {
  var TABLE_FOR_ESCAPE_HTML = {
    "&": "&",
    "\"": """,
    "<": "<",
    ">": ">"
  };
  return text.replace(/[&"<>]/g, function(match) {
    return TABLE_FOR_ESCAPE_HTML[match];
  });
}

// 入力チェックを行う
function checkText(text) {
  // 文字数が0または300以上は不可
  if (0 === text.length || 120 < text.length) {
    alert("文字数は100字にしてください");
    return false;
  }

  // すでに入力された値があれば不可
  var length = localStorage.length;
  for (var i = 0; i < length; i++) {
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
    // 内容が一致するものがあるか比較
    if (text === value) {
      alert("同じ内容は避けてください");
      return false;
    }
  }
  // すべてのチェックを通過できれば可
  return true;
}

最後にCSS

    
ul li {
　　list-style: none;
}
label {
    margin-right: 10px;
    width:80px;
    float: left;
}

.post{
    position: relative;
}

#formButton {
    position: absolute;
}

#list{
    bottom: 0

}

残課題

1.JSONの状態でローカルストレージに格納する。

2.格納したデータの表示を綺麗にする

3.個別のデータの削除や編集をできる様にする。

4.通信状態を見て通信できていたらDBに書き込みする。

特にJSON状態でデータ格納できればかなり柔軟性が広がるし
格納したデータ表示を綺麗にできればそこそこ使えるかなぁと
んえ個別データ編集できれば多少なりとも使えそうだと・・・
と、その前にデータチェックをしっかりしろと。
はい。