Question

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?

Answer 1

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.

Answer 2

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">SO</a>    
<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">SO</a>    
<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.

Answer 3

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.

Answer 4

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">
<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">Google</a>
</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.

友情链接