Q:

Add table row in javascript that survives F5 keypress

I want to add a table row dynamically in javascript and jQuery.
One solution for this would be:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

(see: SO: Add table row in jQuery )
This solution has a big disadvantage: it doesn't survive a browser refresh (F5, Ctr-r keys or pressing the refresh button in the browser tab).
Is there a solution to make the added table row (and also the data that was added by the user in input fields) independant from a browser refresh?
Remark: disabling the F5 button and similar things is not an alternative. 

A:

When you manipulate the DOM objects with Javascript you are doing so in the client browser's memory. Hitting F5 will reload the page and loose every changes in that memory.
To make your changes survive an F5 you have to store them somewhere other than the client's memory. To do so you have various options. The best option depends on your application design and needs.

Database: Very usefull especially when the data you are manipulating needs to be shared among various users. If your applications has a user system and your changes are shared among users you need to store those changes in a centralized environment (such as a Database on a server) so that every user can access and see those changes.
Cookies and localStorage: If the application is intended to work as a black-box (each user sees only his own data) you can work locally with cookies or storages. By the end of the session you can send all local data to the server database as well, if you'd like to keep a centralized copy.

