使用本地存储允许某人发表评论，然后显示已保存的评论

时间：2014-10-15 11:39:34

标签： javascript html5 local-storage

不同脚本的某些元素正在运行，但我似乎无法将保存的注释显示在页面底部。有什么建议为什么有些部分不起作用？当有人在那里写下名字并在文本框中按清除它会清除所述字段，但我无法保存评论然后显示在页面上。我做错了什么？

   <!DOCTYPE html>
  <head>
  <meta http-equiv="Content-type" content="text/html;charset=utf-
  8" />
  <title>Matthew comments</title>
  <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="myScript.js"></script>

  <script>
  function clearComment(){
  $('#txt1').val('');
  };

  </script>

  <script>
  function saveComment()
  var ctext = $('#txt1').val() 
  var cname = $('#namebox').val()
  if (cname === 'Name'){cname = 'Anon';
  alert(‘saveComment cname=’+cname+’ ctext=’+ctext)
  };

  </script>

  <script>

  var cmtlist = ‘<p><span class=”cmtname”’+cname+
  </span>'+ctext+’</p>’;
  $(‘#cmtlist’).empty();
  $(‘#cmtlist’).append(cmtlist);

  </script>

  <script type=”text/javascript”>
  // utility functions for localstorage
  function setObject(key, value) {
  window.localStorage.setItem(key,
  JSON.stringify(value));
  };
  function getObject(key) {
  var storage = window.localStorage;
  var value = storage.getItem(key);
  return value && JSON.parse(value);
  };
  function clearStorage() {
  // removes everything placed in localstorage
  window.localStorage.clear();
  };
  </script>

  <script>
  var cmtlist = $('#cmtlist').html();
  cmtlist = ‘<p><span class=”cmtname”’+cname+
  ‘</span >’+ctext+’</p>’+cmtlist;
  setObject('cmtlist', cmtlist);
  var cmtlist = getObject('cmtlist');
  if (getObject('cmtlist') === null){
  var cmtlist = '';
  } else {
  var cmtlist = getObject('cmtlist');
  };
  if ($('#txt1').val() === 'CLEAR ALL STORAGE NOW!'){
  clearStorage();
  };
  </script>

  </head>
  <body>
  <header id="banner">
  <dl>
  <dt>Matthew Wilson</dt><dd>
  <imgsrc="http://www.uea.ac.uk/documents/2397319/2396777/UEA+logo/bc91b5b5-ab8e-4673-b1e6-1a4a9fd918ab?t=1359129534719" alt="sloth" /></dd>
  </dl>
  </header>
  <nav>

  <button class="navbutton" onClick="clearComment()">Clear Comment</button>
  <button class="navbutton" onClick="saveComment()">Save Comment </button>

  </nav>
  <div id="main">


  <div id="dtext">
   <h4>Your comment</h4>
   <input id="namebox" type="text" maxlength="32" size="20"
   value="Name" />
  <br />
  <textarea id="txt1" class="textbox" rows="6"></textarea>


  </div>


   <h4>Comments</h4>
  <div id="cmtlist">



  </div>









     </div>
    </body>
     </html>

1 个答案:

答案 0 :(得分：1)

试试这个：

的HTML

<button class="navbutton" onClick="clearComment()">Clear Comment</button>
<button class="navbutton" onClick="saveComment()">Save Comment </button>

<div id="dtext">
  <h4>Your comment</h4>
  <input id="namebox" type="text" maxlength="32" size="20" placeholder="Name" />
  <br />
  <textarea id="txt1" class="textbox" rows="6" placeholder="Your comment"></textarea>
</div>

<h4>Comments</h4>
<div id="cmtlist"></div>

的javascript

// utility functions for localstorage
function setObject(key, value) {
  window.localStorage.setItem(key, JSON.stringify(value));
}
function getObject(key) {
  var storage = window.localStorage,
      value = storage.getItem(key);
  return value && JSON.parse(value);
}
function clearStorage() {
  window.localStorage.clear();
}

// Clear inputfields and localstorage
function clearComment(){
  $('#txt1').val('');
  $('#namebox').val('');
  clearStorage();
}

function saveComment(){
  var cText = $('#txt1').val(),
      cName = $('#namebox').val(),
      cmtList = getObject('cmtlist');

  if (cmtList){
    cmtList.push({name: cName, text: cText});
    setObject('cmtlist', cmtList);
  }else{ //Add a comment
    setObject('cmtlist', [{name: cName, text: cText}]);
  }

  bindCmt();
}

function bindCmt(){
  var cmtListElement = $('#cmtlist'),
      cmtList = getObject('cmtlist');

  //Out with the old
  cmtListElement.empty();
  //And in with the new
  $.each(cmtList, function(i, k){
    cmtListElement.append( $('<p><span>'+ k.name +'</span>'+ k.text +'</p>') );
  });
}

//Get the comments on page ready
$(function(){
  bindCmt();
});