解决在IE中获取数据的缓存问题，运行环境为node.js

最新推荐文章于 2022-09-20 17:23:36 发布

weixin_34119545

最新推荐文章于 2022-09-20 17:23:36 发布

阅读量125

点赞数

文章标签： javascript ViewUI

IE下默认会开启缓存策略，不管是页面还是通过ajax请求的数据都会议一个url，url是uri（统一资源定位符）的实例，url就是资源的标识符。

写一个demo进行验证，测试环境：IE8，node.js 0.12.7，页面模板为jade。

页面代码：testCache.jade

页面上放一个按钮，点下后从后台获取一个自增的数值显示在按钮上。

doctype html
html
    head
        meta(charset='utf-8')
        title= title
        script(src='/js/jquery-1.10.2.min.js')
        script(src="/js/bootstrap.min.js")

    body
        button(id='btnTest', type='button', class='btn btn-default gap') 测试
    script.
        $(document).ready(function(){
            $('#btnTest').click(doTest);
        });

        function doTest(){
            $.ajax({
                type: 'GET',
                url: '/cache/data',
                data: '',
                dataType: 'html'})
                .done(function(data){
                    $('#btnTest').html(data);
                })
        }

后台关键代码：

//获取测试页面
router.get('/cache/page', function(req, res){
    res.render('testCache', { title: 'testCache' });
});

//获取自增数值
var index = 0;
router.get('/cache/data', function(req, res){
    var data = index++;
    res.write(data.toString());
    res.end();
});

运行效果可以看出无数次疯狂的点击后，还是“0”，原因就是IE第一次拿到数据后，从相同路径获取数据时采用了默认的缓存策略，当然可以通过IE的设置来规避缓存。

缓存问题，根本上还是响应header的设置问题，只不过IE在发现响应头中没有缓存设置项时会采取缓存策略，和其他浏览器的处理方式不同而已。

缓存很多时候是必须的，比如：新闻页面，升级页面，静态页面，这些资源在被访问后都可以缓存在浏览器段，通过根据资源的更新策略来设置规定的过期时间，可降低同服务器的资源获取次数。

当然在不需要缓存的地方，也要坚决的避免被缓存。

在IE中避免被缓存，如果是一个页面，那么就要在meta中设置缓存。

    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="progma" content="no-cache">

上面的三项设置其实只要cache-control就可以了，本质上来说，在meta中的http-equiv的设置都会有服务器填入页面的响应header中。

如果是在页面上通过ajax来获取数据的，就要在后台数据的响应处，加上缓存的设置，明明白白地告诉浏览器，请你不要缓存。如下。

//获取自增数值
var index = 0;
router.get('/cache/data', function(req, res){
    var data = index++;
    res.setHeader('cache-control', 'no-cache');
    res.write(data.toString());
    res.end();
});

通过设置了no-cache后，本文的demo中的字增值就可以随着点击而增加并显示在按钮上。

在http的header中，缓存的配置项主要是5种，这里就列一下，网上的说明太多了。

1.cache-control

有4个值，private、no-cache、max-age、must-revalidate。

private：缓存到私有缓存。

max-age：相对过期时间，秒为单位，从浏览器获取资源的相应秒数后过期。

must-revalidate：每次访问都需要重新验证。

no-cache：不缓存。

2.expires

过期时间，这是一个绝对时间，时间格式是格林威治时间，如“Sun, 08 Nov2009 03:37:26 GMT”，过了这个时间，就过期

3.progma

对http1.0服务器的兼容。