Here is a VERY stripped down version of some code you could use. You can find setCookie and getCookie scripts all over the web, for example, so I leave them to you.
Code:
<html>
<body>
<form action="someOtherPage.php" method="POST">
What is your name? <input class="SAVE" name="username" />
<br/>
What is your age? <input class="SAVE" name="age" />
<br/>
<input class="SAVETRIGGER" type="button" value="Save my entries" />
</form>
<script type="text/javascript">
(
function( )
{
var toSave = document.getElementsByClassName("SAVE");
for ( var t = 0; t < toSave.length; ++t )
{
var field = toSave[t];
field.value = getCookie( field.name );
}
var triggers = document.getElementsByClassName("SAVETRIGGER");
for ( var t = 0; t < triggers.length; ++t )
{
triggers[t].onclick = saveData;
}
function saveData( )
{
for ( var t = 0; t < toSave.length; ++t )
{
var field = toSave[t];
setCookie( field.value, field.name );
}
}
function setCookie( name, value ) { ...you write.. }
function getCookie( name ) { ...you write... }
}
)( );
</script>
</body>
</html>
That is truly bare bones, but it does demonstrate the features requested in the second and third requirements. You need to flesh it out a *LOT* more. I would suggest, for example, that you provide at least two and better more HTML pages showing auto-remembering of values across pages, etc., etc. Or maybe auto-remembering that takes into account the URL of the pages, even better.