Javascript 刷新后的持久数据

我有一个网页，我有麻烦。工作正常：从下拉菜单中选择，图像将更新

问题在于手动刷新页面时：显示初始图像，但下拉菜单选项保持不变；嗯，我把它修好了

真正的问题是，在刷新之后，当我选择一个新项目时，由于某种原因会显示刷新之前的项目

如何更改此选项，以便在刷新后显示新的选择而不是上一个选择

我的代码在Chrome、Firefox和Safari中运行良好，但在IE9中不行

这是我正在使用的JavaScript代码：

function doMillviewInitialise()
{
    window.document.forms[0].reset();
}

以下是HTML：

<form>
    <select id="millviewStyle" onchange="doMillview();">
        <option value="self">Millview @ Guygar.com&copy;</option>
        <option>----------------------</option>
        <option value="midnightExpress">Midnight Express</option>
        <option value="turnedOn">Turned On</option>
        <option value="storage">Storage</option>
        <option value="plasticStress">Plastic Stress</option>
        <option value="mirrorEffect">Mirror Effect</option>
        <option value="okComputer">OK Computer</option>
        <option value="repertoire">Repertoire</option>
        <option value="calibrate">Calibrate</option>
        <option value="hysteria">Hysteria</option>
        <option value="lastExit">Last Exit</option>
    </select>
</form>

---

加载页面后，您可以强制重新设置表单，您也需要表单：

document.forms[0].reset()

---

我看到了您描述的问题，我猜IE正在缓存iframe。事实上，当我使用IE9的开发工具查看iframe时，我可以看到它正在iframe中加载先前选择的文档

我建议简化你的代码。我不知道您的最终目标是什么，但我已经为您创建了一个不使用iframe的简单测试用例。你可以现场观看。注意，我使用jQuery简化了DOM操作

HTML:

---

有几种方法可以将图像加载或预加载到页面中，如果这是您想要的。您可以使用javascript将所有图像加载到“隐藏”容器中

浏览器会缓存这些图像，所以你甚至可以在所有图像加载后丢弃容器，如果你愿意的话

另一个优点是，在页面刷新的情况下，不会从服务器重新加载图像。如果希望在刷新后加载页面时显示特定图像，我建议将window.location.hash URL哈希更改为图像的ID，并在页面加载时读取此属性并显示相应的图像

http://..../millview/page.htmlmidnightExpress

然后：

window.onload = function() {
  selected = window.location.hash.substring(1); // selected === 'midnightExpress'
  // show the image
}

用这个做实验。。。您可能会发现使用URL哈希作为跨页面/刷新/历史记录的持久性也是非常有用的

如果你认为这太冗长和无用，请发回

---

包括IE在内的浏览器通过URL缓存图像。因此，只要预加载和当前查看的图像的src属性保持不变，图像就不会从服务器重新加载，而只是从缓存中获取，这是非常快的。加载图像后，可以丢弃预加载的图像元素-我们只希望浏览器缓存的图像

iGuygar IE9与iFrame以及其他相当标准的浏览器存在问题。例如，CSS3文本阴影可以创建一个div，然后将其绝对定位在屏幕外约10000像素处在div中预加载图像

因此，您的div的HTML：

<div id="imgpreload">
 <img src="images/pic1.png" alt="pic1" id="pic1">
 <img src="images/pic2.png" alt="pic2" id="pic2">
 <img src="images/pic3.png" alt="pic3" id="pic3">
</div>

除移动客户外，有些人还喜欢添加不必要的内容：

width:1px;
height:1px;
overflow:hidden;

---

到那个CSS。这将在所有已知的浏览器中预加载您的图像。

我可能误解了您的问题，但它在Linux上的Chrome 15开发版本中对我来说很好。不，您没有误解。它在Chrome上也能工作，我刚刚测试过。但不是在IE9中：有人需要帮助吗？谢谢你试过把表单中的信息保存在cookie中吗？你是什么意思？我是新来的，所以我不确定我是否听懂了你的话。这是固定的吗？在IE9上对我来说很好。加载页面->反光天花板固定装置，更改为午夜快车->门铰链，刷新->反光天花板固定装置，更改为打开->旋钮。似乎正在工作，除非这不是应该发生的。他要求您在页面加载时重置它，而不是在select input的onchange事件上重置。我知道，DOMILLVIEW初始化页面加载事件上的触发器。感谢您的输入，但我需要iframe，除非您能进一步了解。iframe的目的是在显示图像之前对图像进行缓冲。一旦图像完全加载到iframe中，它就会在父文档中启动一个函数，并显示图像。注意：正如我之前提到的，它可以在firefox、chrome和safari中工作，所以我不知道是否应该将其归类为IE bug，并将其保留，但如果可能的话，我希望它可以在IE中工作。这是一种有趣的方法。我想知道是否所有浏览器都可以使用图像加载。另外，我正忙着另一个项目，无法调查，所以如果你的解决方案有效，我在赏金截止日期之前不会知道。提前对此表示歉意，非常感谢您的贡献。这太棒了，终于有人说这是IE问题/bug，不是我做的。时间允许时，我将进行试验。谢谢你的意见。

window.onload = function() {
  selected = window.location.hash.substring(1); // selected === 'midnightExpress'
  // show the image
}

<div id="imgpreload">
 <img src="images/pic1.png" alt="pic1" id="pic1">
 <img src="images/pic2.png" alt="pic2" id="pic2">
 <img src="images/pic3.png" alt="pic3" id="pic3">
</div>

#imgpreload {
  position:absolute;
  left:9999px; 
}

width:1px;
height:1px;
overflow:hidden;