即使刷新也保存聊天框消息

Question

我创建了这个聊天框，但我不知道为什么它不保存您提交的内容。所以每次我刷新我的页面时，一切都清楚了。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  </head>
  <body>  
    <div class="info">
      <label for="example">Enter Text
      </label>
      <input id="example" type="text"
             name="Ntext" size="20">
      <input id="sent" type="submit"  
             value="Send"> 
  </div>
    <p id="para">      
    </p>
  </body>
  <script>
    window.onclick = function(e)
    {   var id =  e.target.id;   
     if (id === 'sent')  
     { var txt = document.getElementById('example').value    
       $( "#para" ).empty().append( txt );
     }
    }
  </script>
</html>

我可以或必须添加保存按钮吗？

Answer 1

DOM 中的任何数据（例如您使用 .append() 添加的数据）基本上都是短暂的，除非您构建某种存储和加载方法，否则刷新后永远不会保留它进入 DOM 你自己。通常，这看起来像是某种 server-side 数据库，您通过编写的 API 连接到您的应用程序。持久性的另一个选择是使用 localStorage（文档 here）。

我建议不要对任何非常重要的数据使用 localStorage，因为它确实将数据保存在用户的浏览器中，因此不是特别安全，也不会提供任何 cross-device 持久性根本。但是，如果这只是一个玩具项目，并且您想在刷新后看到一些数据，它可以为您做到这一点。

即使刷新也保存聊天框消息

Save chat box messages even if you refresh

javascript

chat