我的页面是从浏览器缓存加载的吗？

发布于 2024-10-07 13:58:30 字数 533 浏览 6 评论 0原文

我在页面上有一个“新项目”徽章，我想立即更新该页面从缓存加载的内容（即，当点击“后退”或“前进”返回此页面时）。实现这一目标的最佳方法是什么？

设置非常简单。应用程序的布局每 8 秒查找一次新项目，并相应地更新徽章 + 项目列表。

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

当有人离开此页面查看某个项目的详细信息时，可能会发生很多事情。在任何用户查看它们之前，事物都是“新的”，并且该应用程序可能会有多个用户同时使用它（用于呼叫中心或支持票证的工作流程）。

为了确保徽章始终是最新的，我有：

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

..虽然这有效，但轮询“加载”上的新项目仅在从缓存加载页面时才有用。是否有可靠的跨浏览器方法来判断页面是否正在从缓存加载？

原文

I have a "new items" badge on a page that I want to update immediately the page is loaded from the cache (i.e. when hitting "Back" or "Forward" to return to this page). What is the best way to accomplish this?

The setup is pretty simple. The layout for the app looks for new items every 8 seconds, and updates the badge + list of items accordingly.

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

When someone navigates away from this page to look at the details of an item, a lot can happen. Things are "new" until any user has viewed them, and the app will likely have several user using it simultaneously (the kind of workflow used for a call center or support tickets).

To make sure that the badges are always up to date, I have:

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

..And though this works, polling for new items on 'load' is only useful when the page is loaded from the cache. Is there a reliable cross-browser way to tell if a page is being loaded from the cache?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆梦 2024-10-14 13:58:30

导航计时现在在大多数浏览器中（ie9+）
http://www.w3.org/TR/navigation-计时/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }

Navigation Timing is in most browsers now(ie9+)
http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }

回复收藏 0 原文

花开浅夏 2024-10-14 13:58:30

您可以要求网络浏览器不缓存该页面。尝试这些 HTTP 标头：

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

特别是，Cache-control: no-store 很有趣，因为它告诉浏览器根本不要将页面存储在内存中，这可以防止在您点击返回时加载过时的页面/前进按钮。

如果您这样做，则无需轮询页面加载数据。

You can ask the web browser to not cache the page. Try these HTTP headers:

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

Particularly, Cache-control: no-store is interesting because it tells the browser to not store the page in memory at all which prevents a stale page being loaded when you hit the back/forward button.

If you do this instead, you don't have to poll for data on page load.

回复收藏 0 原文

格子衫的從容 2024-10-14 13:58:30

一个部分 hacky 的解决方案是在服务器上设置一个包含当前时间的 var，并在页面顶部设置一个包含当前客户端时间的 var。如果它们的差异超过某个阈值（1 分钟？），那么您可以假设它是缓存的页面加载。

示例 JS（在服务器端使用 ASP.Net 语法）：

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

或者，在客户端使用 cookie（假设启用了 cookie），您可以检查具有当前页面版本的唯一键的 cookie。如果不存在，则为其编写一个 cookie，并且在任何其他页面访问时，cookie 的存在表明它正在从缓存中加载。

例如（假设一些 cookie 辅助函数可用）

var uniqueKey = '<%= SomeUniqueValueGenerator() %>';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe

A partial hacky solution is to have a var with the current time set on the server, and set a var with the current client time at the top of the page. If they differ by more than a certain threshold (1 minute?) then you could assume it's a cached page load.

Example JS (using ASP.Net syntax for the server side):

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

Alternatively, using cookies on the client side (assuming cookies are enabled), you can check for a cookie with a unique key for the current version of the page. If none exists, you write a cookie for it, and on any other page access, the existence of the cookie shows you that it's being loaded from the cache.

E.g. (assumes some cookie helper functions are available)

var uniqueKey = '<%= SomeUniqueValueGenerator() %>';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe

回复收藏 0 原文

眼角的笑意。 2024-10-14 13:58:30

就我个人而言，我会设置包含每个元素的项目 id 的数据属性。

即

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

您的 App.pollForNewItems 函数将获取第一个元素的 data-item-id 属性（如果最新的是第一个），并将其与您的原始请求一起发送到服务器。

然后，服务器将仅返回项目 WHERE id > > ... 然后您可以将它们添加到列表中。

我仍然很困惑为什么你想知道浏览器是否有页面的缓存版本。

另外，是否有理由绑定到 load 而不是 ready ？

基督教

Personally, I would set data attribute containing the item id for each element.

I.e.

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

Your App.pollForNewItems function would grab the data-item-id attribute of the first element (if newest are first) and send it to the server with your original request.

The server would then only return the items WHERE id > ... which you can then prepend them to the list.

I'm still confused as to why you want to know if the browser has a cached version of the page.

Also, is there a reason for binding to load instead of ready?