在页面DOM更新后，我该如何修改浏览器缓存？

Question

到目前为止，我知道可以使用AJAX来分离静态和动态内容，因此如果博客文章有评论更新，则不必重新下载文章（它将成为304），只需下载评论即可。现在，我考虑持久化获取的动态内容，这样下一次只需要请求新评论。是否有任何方法可以在不依赖Flash / Gears / HTML5Storage或其他插件的情况下实现这一点？

编辑：假设文章上的评论部分如下所示：

<div class='comments' id='comments'>
 <a name='comments'></a>
 <h4>43 comments:</h4>
 <dl id='comments-block'></dl>
 <p class='comment-footer'>
  <a href='http://example.org/postcomment' onclick=''>Post a Comment</a>
 </p>
</div>

在此之上，一个AJAX调用将获取评论并将其附加到包含以下代码片段的<dl id='comments-block'>中：

<div class='comments-singleblock'>
  <dt class='comment-author' id='comment-5378479254070788764'>
    <a name='comment-5378479254070788764'></a>
      Anonymous coward
      <span class='comment-timestamp'>
        <a href='#comment-5378479254070788764' title='comment permalink'>
           5 February 2012 16:52
        </a>
      </span>
    </a>
  </dt>
  <dd class='comment-body'>
    <p>
      Your lorum is my ipsum, the dolor is sit amet us.
    </p>
  </dd>
  <dd class='comment-footer'>
    Which eternal lies, that is not death.
  </dd>
</div>

可以进行缓存。后续的AJAX调用应该只返回新内容，并附加到上面。

1. 第一个AJAX评论调用没有时间戳：获取所有评论，直到当前时间戳A。这是被缓存的。
2. 时间过去了，在新的时间戳B上，向服务器发送请求以获取时间戳A之后的评论。这个调用可能会被缓存，但是没有意义，因为请求URL永远不会被重用。
3. 客户端现在有了更新的评论，直到时间戳B。但是只有时间戳A之前的内容被缓存。
4. 客户端刷新文章，触发第一个没有时间戳的评论请求，它应该返回缓存的评论，直到时间戳A。

所以问题在于如何修改缓存内容以包括时间戳A和B之间的内容。

- syockit

---

请在页面上发布现有评论的HTML结构（例如，在对您的AJAX函数进行单个调用后）。 - Joe Coder

Answer 1

创建一个本地变量来存储您的Ajax调用的JSON结果。

创建一个本地变量来存储Max_Last_Modified_Date。

创建一个JavaScript助手，它将绘制JSON结果。

创建一个服务器端处理程序，该处理程序将告诉您评论的MAX（LastModifiedDate）。

创建一个服务器端处理程序，该处理程序将以JSON形式返回评论

• 所有结果（第一次获取）
• 任何修改日期在Max_Last_Modified_Date之后的内容。

- sonjz

---

我希望有一种方法可以避免最后部分的冗余（想象一下已经有1023个1KiB lorem ipsums的评论！您将不得不获取总共1MiB和1KiB）。 我想这就是当今协议的限制。 暂时接受您的答案。 谢谢！ - syockit

你可以在你的Web服务器上启用gzip压缩，这将通常将你的1KB文本压缩70-90％。这个过程通常在浏览器和Web服务器之间是透明的。 - sonjz

不太确定你所说的“最后一部分的冗余”是什么意思。在进行“第一次获取”（即大量拉取）之后，您可以使用事件来刷新列表，您不应该在“第一次获取”的数据列表中再次拉取任何内容，因为您已经拥有它了。如果您担心“第一次获取”的大小，您可以在JavaScript中实现一个“滚动到视图”事件，以便在用户向下滚动时将评论列表附加到底部，即当最后一条评论的底部进入视图时。 - sonjz

哦，我没有想得够深入。我以为如果重新访问页面，我就必须再次获取所有结果，因为最后修改日期（Max_Last_Modified_Date）没有被存储。然而，我本可以将日期作为缓存的元数据，并在开始获取评论之前解析它。 - syockit