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

Using local storage to allow someone to comment and then to show saved comments

本文关键字：评论 然后 保存 显示 某人 存储 许某人      更新时间：2023-09-26

不同脚本的一些元素正在工作，但我似乎无法将保存的注释显示在页面底部。有什么建议可以解释为什么有些零件不工作？当有人在文本框中写下姓名和我按下清除键时，它会清除所述字段，但我无法保存评论并将其显示在页面上。我做错了什么？

   <!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>

试试这个：

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();
});
相关文章：