js 给url添加时间戳解决浏览器缓存

最新推荐文章于 2022-02-23 10:00:51 发布

辰枫Sir.

最新推荐文章于 2022-02-23 10:00:51 发布

阅读量2.6k

点赞数 2

分类专栏：经验分享 JavaScript 文章标签： javascript 浏览器缓存

本文链接：https://blog.csdn.net/qq_43531694/article/details/108842861

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

经验分享

15 篇文章 1 订阅

订阅专栏

为什么加时间戳比较好？

在开发的过程中，需要给html的静态资源加上一个随机数，避免版本迭代的时候取本地缓存文件（地址如果一致，浏览器会认为这是同一个请求），可以给css文件，js文件自动加上时间戳。

html

<fieldset>
    <legend>给url添加时间戳</legend>
    <img id="bgimg" alt="">
 </fieldset>

<script>
    let cacheImg = document.querySelector('[id="bgimg"]')
    cacheImg.setAttribute('src', timeStamp('bicycle.gif'))

    // 解决项目更换图片浏览器缓存问题
    function timeStamp(url) {
      let currentTime_stamp = new Date().getTime()
      if (url.indexOf('?') > -1) {
        url = url.substr(0, url.indexOf("?")) + "?timestamp=" + currentTime_stamp
      } else {
        url = url + "?timestamp=" + currentTime_stamp
      }
      return url
    }

    var Url = window.location.href;
    //网页URL添加时间戳
    //window.history.pushState 不刷新页面，但是改变页面的url地址
    window.history.pushState({}, 0, timeStamp(Url));
    console.log(window.location.href);
 </script>

在这里插入图片描述