SO 的表单如何记住以前的输入值？答案

【问题标题】：How does SO's form remember previous input values?SO 的表单如何记住以前的输入值？
【发布时间】：2010-05-01 12:32:42
【问题描述】：

我注意到如果我返回页面，会记住 Title 或 Body 部分按浏览器的返回按钮。

这个功能在我测试的所有浏览器中都可用，但在我自己的项目中不存在。

我怎样才能达到这种效果？

更新

我仍然没有任何线索，但猜猜是 http 标头或 javascript 启用了某种客户端缓存？

【问题讨论】：

此功能通常由您的浏览器处理。
那为什么我自己的项目在同一个浏览器中没有这个功能呢？不同的事情必须是有目的的发生。
人们可能会告诉您如何配置您的服务器以提供正确的与缓存相关的 http 标头，如果您包含有关为页面提供服务的服务器软件的信息。每个服务器都有自己的配置来处理这些事情......
如果你想做到与缓存完全无关 - 即让你的表单数据即使进入另一个页面然后再次进入你的页面也能存活，你可以将数据存储在 cookie 或服务器中 -一旦触发了您的输入字段之一的 onchange 事件，就会进行边会话。加载表单时，您必须将默认值设置为存储的值。

标签： html forms webbrowser-control browser-cache

【解决方案1】：

它与页面的缓存属性有关。

1) 如果允许浏览器缓存您的页面，它也会记住表单字段。

2）如果不允许缓存页面，就会忘记一切。

通常，动态生成的页面属于第 2 类，因此您看不到缓存。这确实是由 HTTP 标头决定的（尤其是 Cache-Control 和 Last-Modified，或者使用 E-Tags ）。有关您的浏览器如何确定缓存的说明（非常重要！），请参见示例：

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

但最简单的方法是将表单放在静态 HTML 页面上，然后您的网络服务器将处理一切。

【讨论】：

我无法将表单放在静态 HTML 页面上，我不知道为什么 cache-control 会自动设置为 ` no-store, no-cache, must-revalidate, post -check=0, pre-check=0,and Pragma` 设置为no-cache。
cache-control 设置为动态页面的这些值，因为（通常）您希望用户每次都看到新生成的页面，以确保他看到最新信息。如果没有，您可以从脚本中提供不同的 Cache-Control 标头。更具体地说，我需要知道您使用什么语言来生成页面。
@wump：是否有关于网络浏览器应如何预填充输入值的标准规范？还是浏览器“按照他们的感觉”实现这个？

【解决方案2】：

您需要找到一种机制来在您所服务的页面上设置Cache-Control 参数。

您没有说明您是如何提供网页的。但是，这是一个 ASP 页面的示例，使用后退按钮返回页面时导致表单内容消失（这是您当前遇到的行为）：

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

注意前 3 行，做一些小的修改...

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

现在输入字段内容被保留。这是您试图实现的行为。那里可能是您需要设置的附加参数，具体取决于您的具体情况需要和服务器应用的默认值。

有关 Cache-Control 的更多详细信息，请访问：

Cache Control in ASP。与微软的大多数事情一样，它只是讨论 IE。

Caching 上的本教程通过示例代码很好地介绍了几种不同的 Web 服务器，包括 PHP。

w3.org是你的参考真的需要学习，尤其是第 14.9 节关于 Cache-Control 的内容。

获得的关键您正在寻找的行为是使用正确的缓存控制参数化服务页面。

【讨论】：

【解决方案3】：

虽然我不能给出太多建议，但“”页面的 http 标头如下所示：

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

我会将其与您自己的页面/表单进行比较，尤其是处理缓存和过期的任何标头。

【讨论】：

我没有设置任何标头信息，似乎我的网络服务器自动为我添加了缓存策略，这不是我想要的。

【解决方案4】：

没有魔法。只需尝试以下 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>

在您的浏览器中打开它，输入一些文本，单击链接，然后单击返回按钮，它会记住该值。在 IE8、FireFox 3.6、Chrome 4 上测试并运行。

【讨论】：

我看不出它有什么特别之处，你能解释一下它为什么有效吗？
这可能有效，因为它是在没有网络服务器的情况下在本地文件系统上查看的。
@user198729 : "It has to do with the caching properties of your page." 见wump 的答案（当前接受的答案）