views:

458

answers:

5

I've noticed that the Title or Body part is remembered if I come back to the Ask Question page by pressing Back button of my browser.

This feature is available in all browsers I tested, but doesn't exist for the forms in my own projects.

How can I approach that effect?

UPDATE

I still don't have any clue yet,but guess it that some kind of client cache enabled by http headers or javascript?

A: 

There's no magic. Just try the following HTML:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
    <input type="text" name="title" value="" />
    <a href="http://www.google.com"&gt;Google&lt;/a&gt;
</body>
</html>

Open it in your browser, type some text, click on the link and then the Back button and it will remember the value. Tested and working on IE8, FireFox 3.6, Chrome 4.

Darin Dimitrov
I don't see anything special in it,can you explain why it works?
+3  A: 

It has to do with the caching properties of your page.

1) If the browser is allowed to cache your page, it will also remember the form fields.

2) If it is not allowed to cache the page, it will forget everything.

Usually, dynamically generated pages fall into category 2, hence you don't see the caching. This is indeed determined by HTTP headers (especially Cache-Control and Last-Modified, or using E-Tags ). For an explanation on how your browser determines caching (non-trivial!), see for example:

http://www.webscalingblog.com/performance/caching-http-headers-last-modified-and-etag.html

But easiest is to put the form on a static HTML page, then your webserver will handle everything.

wump
I can't put the form on a static HTML page,and I don't know why the `cache-control` is automatically set to ` no-store, no-cache, must-revalidate, post-check=0, pre-check=0`,and `Pragma` set to `no-cache`.
cache-control is set to those values for dynamic pages because (generally) you want the user to see a newly generated page every time, to make sure he sees the most recent info. If not, you can provide a different Cache-Control header from your script. To be more specific, I need to know what language you use to generate the page.
wump
+1  A: 

While I can't really give much adivce, the http headers of the "Ask Question" page looks like this:

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: [EDITED AWAY}
Date: Mon, 03 May 2010 16:04:44 GMT
Content-Length: 4800

I'd compare that to your own pages/forms, especially any headers dealing with caching and expiration.

nos
I didn't set any header info,seems my web server automatically add the cache policy for me,which is not what I desired.
+2  A: 

You need to find a mechanism to set the Cache-Control parameters on the pages you serve.

You do not indicate how you are serving web pages. But, here is an example of an ASP page that causes the form content to disappear when returning to a page using the back button (this is the behaviour you are currently experiencing):

<% Response.CacheControl = "no-cache" %>    
<% Response.AddHeader "Pragma", "no-cache" %>    
<% Response.Expires = -1 %>    
<HTML>    
<HEAD>    
<TITLE>Test page</TITLE>    
</HEAD>      
<BODY>    
Type some text into this box, click SO followed by the BACK button:   
<input type="text" name="title" value="" />   
<a href="http://www.stackoverflow.com"&gt;SO&lt;/a&gt;    
<p>    
When you get back the text you typed will be gone.   
</BODY>    
</HTML>    

Note the top 3 lines, make a couple of minor modifications...

<% Response.CacheControl = "private" %>    
<HTML>    
<HEAD>    
<TITLE>Test page</TITLE>    
</HEAD>      
<BODY>    
Type some text into this box, click SO followed by the BACK button:   
<input type="text" name="title" value="" />   
<a href="http://www.stackoverflow.com"&gt;SO&lt;/a&gt;    
<p>    
When you get back the text you typed will still be there   
</BODY>    
</HTML>    

Now the input field content is preserved. This is the behaviour you are trying to achieve. There may be additional parameters you need to set too depending on your specific needs and the defaults applied by your server.

Further details for Cache-Control are available at:

Cache Control in ASP. As with most things Microsoft, it only discusses IE.

This tutorial on Caching provides a good introduction with example code for several different web servers, including PHP.

w3.org is the reference you really need to study, particularly section 14.9 on Cache-Control.

The key to getting the behaviour you are looking for is in serving pages with the correct cache control parameterization.

NealB
A: 

If you want to do it completely unrelated from caching - i.e. making your form data survive even going to another page and then going to your page again, you can store the data in a cookie or a server-side session as soon as the onchange event of one of your input fields is triggered. When loading the form you simple have to set the default value to the stored one.

ThiefMaster