Save chat box messages even if you refresh

I created this chat box but i don't know why it doesn't save what you submit. So everytime i refresh my page, it goes all clear.

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

Can I or Do I have to add a save button?

Solution

Any data in the DOM (such as the data you are adding using .append()) is basically ephemeral and will never stick around after a refresh unless you build out some method for storing and loading it into the DOM yourself. Generally this would look like some sort of server-side database that you wire up to your app through an API you write. Another option for persistence is using localStorage (docs here).

I would recommend not using localStorage for any really important data, though, since it literally keeps data in the user's browser and therefore is not particularly secure, nor does it provide any cross-device persistence at all. But if this is just a toy project and you want to see some data stick around after a refresh, it could do that for you.