微信开发临时缓存照片打不开

2017-10-18 11:14:08 Jalon2015 阅读数 1252
  • 函数计算课程介绍

    1、掌握Raspberry Pi的使用; 2、具备树莓派的网站建站技术; 3、具备基于树莓派的物联网开发技术; 4、基于Raspberry的人脸识别与检测实践;

    36人学习 孙琦
    免费试看

问题描述:

前端上传图片,通过用户id进行命名(2.jpg);结果发现有时候明明更换了图片,但是再次进入还是之前的图片

原因分析:

虽然更换了图片,但是因为浏览器或者微信缓存的原因,如果图片的名字是一样的,它会直接从本地拉取缓存的图片,以便提高应用的流畅度;

解决办法:

更改图片名字即可;之前是为了图个方便,后来才发现导致了更多的麻烦

2017-11-29 15:46:43 chjj0904 阅读数 34118
  • 函数计算课程介绍

    1、掌握Raspberry Pi的使用; 2、具备树莓派的网站建站技术; 3、具备基于树莓派的物联网开发技术; 4、基于Raspberry的人脸识别与检测实践;

    36人学习 孙琦
    免费试看

关于本地缓存

1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

2.localStorage 是永久存储

 

相应的api----------

  wx.setStorage(OBJECT)

wx.getStorage(OBJECT)

wx.getStorageInfo(OBJECT)

wx.removeStorage(OBJECT)

wx.setStorageSync(KEY,DATA)

 

wx.getStorageSync(KEY)

wx.getStorageInfoSync

wx.clearStorage()

wx.clearStorageSync() ...

Api的具体使用详见官方文档

 

 

注意:这里又一个问题就是这些缓存不清理会永久的缓存----------然而实际开发中,我们往往需要设置一些缓存的时效性

 

所以就需要对这些api进行封装(二次开发)直接上代码

 

 

设置缓存-----------put(key, val, time)        time为可选参数表示有效时间(单位:秒)

function put(key, val, time) {

wx.setStorageSync(key, val)

var seconds = parseInt(time);

if (seconds > 0) {

var timestamp = Date.parse(new Date());

timestamp = timestamp / 1000 + seconds;

wx.setStorageSync(k + 'dtime', timestamp + "")

} else {

wx.removeStorageSync(k + 'dtime')

}

}

 

 

读取缓存-----get(key, def)-------def为可选参数,表示无缓存数据时返回值(支持字符串、json、数组、boolean等等)

function get(key, def) {

var deadtime = parseInt(wx.getStorageSync(key+ 'dtime'))

if (deadtime) {

if (parseInt(deadtime) < Date.parse(new Date()) /1000) {

if (def) { return def; }else { return; }

}

}

var res = wx.getStorageSync(key);

if (res) {

return res;

} else {

return def;

}

}

 

 

 

2018-12-07 17:59:00 weixin_30258901 阅读数 517
  • 函数计算课程介绍

    1、掌握Raspberry Pi的使用; 2、具备树莓派的网站建站技术; 3、具备基于树莓派的物联网开发技术; 4、基于Raspberry的人脸识别与检测实践;

    36人学习 孙琦
    免费试看

bug1:在新版微信中,部门安卓机子(华为)出现window.location.href/window.location.reload....等方法来刷新本页面链接,发现页面没有被刷新,经过排查,发现是因为缓存原因。

解决方案:这时候给链接加一个时间戳来解决页面缓存!!!

时间撮:

var myDate = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');

解决缓存方案二:利用pagehide/pageshow 事件

会话(Session)中的某一个页面显示/隐藏时,会触发 pagehide 和 pageshow 事件。 这两个事件都有一个 persisted 属性用来指示当前页面是否被 BF Cache 缓存。 因此可以通过 persisted 属性来达到禁用 BF Cache 的效果:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

注意 pageshow 不仅在显示被缓存的页面时触发,在第一次加载页面时也会触发。 因此需要检测事件的 persisted 属性,页面第一次加载时它的值是 false

另外 pageshow 的时机总是在 load 事件之后。 这一点很容易检测,比如下面的代码中 pageshow 日志总在 load 之前打印:

window.addEventListener('pageshow', function () {
  console.log('on pageshow')
})
window.addEventListener('load', function () {
  console.log('load')
})

XHR 缓存

解决缓存方案三:时间撮或者随机变量

详细参考https://harttle.land/2017/03/12/backward-forward-cache.html

 

前端清除缓存方法

meta方法 有时候谷歌等浏览器不支持

//不缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">

其实form表单的缓存对于我们书写还是有帮助的,一般情况不建议清理,但是有时候为了安全问题等,需要清理一下!

jquery ajax清除浏览器缓存

方式一:用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:

$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){ 
xmlHttp.setRequestHeader("If-Modified-Since","0"); 
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
async:false
});


方法二,直接用cache:false

$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false, 
ifModified :true ,

success:function(response){
//操作
}
async:false
});


方法三:用随机数,随机数也是避免缓存的一种很不错的方法!

URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了

方法四:用随机时间,和随机数一样。

在 URL 参数后加上 "?timestamp=" + new Date().getTime();


方法五:用php后端处理。

在 URL 参数后加上 在服务端加 header("Cache-Control: no-cache, must-revalidate");

转载于:https://www.cnblogs.com/qdlhj/p/10084293.html

2018-08-01 08:59:15 qq_37192063 阅读数 6608
  • 函数计算课程介绍

    1、掌握Raspberry Pi的使用; 2、具备树莓派的网站建站技术; 3、具备基于树莓派的物联网开发技术; 4、基于Raspberry的人脸识别与检测实践;

    36人学习 孙琦
    免费试看

每次打开微信小程序 都会默认缓存一份项目,它的路径如下:

 

C:\Users\Administrator\AppData\Local\微信web开发者工具\User Data

C:\Users\Administrator\AppDate\Local\微信web开发者工具\User Data

 

还有很多项目打开都会在C盘生成各种文件。卸载的时候一定要注意删除C盘的文件。

2019-07-10 11:08:00 weixin_42252295 阅读数 533
  • 函数计算课程介绍

    1、掌握Raspberry Pi的使用; 2、具备树莓派的网站建站技术; 3、具备基于树莓派的物联网开发技术; 4、基于Raspberry的人脸识别与检测实践;

    36人学习 孙琦
    免费试看

小程序官方API提供了设置缓存和读取缓存的api,不过都是永久缓存,除非用户手动清除,否则会一直留在用户手机 。而我们都知道,本地缓存最大为10M。实际开发过程中,或者为了给用户节省内存,或者为了设置信息即时性,我们需要对部分缓存设置时效性,在它到期之后自动删除。

一、关于缓存方法微信官方api如下

1.异步缓存

wx.setStorage(OBJECT)

wx.getStorage(OBJECT)

wx.getStorageInfo(OBJECT)

wx.removeStorage(OBJECT)

wx.clearStorage()

2.同步缓存

wx.setStorageSync(KEY,DATA)

wx.getStorageSync(KEY)

wx.getStorageInfoSync

wx.clearStorageSync() …

关于具体的使用方法请去看官方文档

二、下面就是记录关于设置缓存时效性的方法,说到底也就是对这些缓存方法进行二次封装

//设置时效缓存,time为有效时间,(单位:小时,不填则默认24小时)
function setStorageSyncHour(key, value, time) {
  wx.setStorageSync(key, value)
  var t = time ? time : 24;
  var seconds = parseInt(t * 3600);
  if (seconds > 0) {
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000 + seconds;
    wx.setStorageSync(key + 'dtime', timestamp + "")
  } else {
    wx.removeStorageSync(key + 'dtime')
  }
}

//设置时效缓存,time为有效时间,(单位:秒,不填则默认3600s)
function setStorageSyncSecond(key, value, time) {
  wx.setStorageSync(key, val)
  var t = time ? time : 3600;
  var seconds = parseInt(t);
  if (seconds > 0) {
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000 + seconds;
    wx.setStorageSync(k + 'dtime', timestamp + "")
  } else {
    wx.removeStorageSync(k + 'dtime')
  }
}

//读取缓存,若缓存不存在,返回def,def为可选参数,表示无缓存数据时返回值(支持字符串、json、数组、boolean等等)
function getStorageSyncTime(key, def) {
  var deadtime = parseInt(wx.getStorageSync(key + 'dtime'))
  if (deadtime) {
    if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
      wx.removeStorageSync(key);
      wx.removeStorageSync(key + 'dtime');
      if (def) { return def; } else { return; }
    }
  }
  var res = wx.getStorageSync(key);
  if (res) {
    return res;
  } else if (def) {
    return def;
  } else {
    return;
  }
}

module.exports = {
  setStorageSyncHour: setStorageSyncHour,
  setStorageSyncSecond: setStorageSyncSecond,
  getStorageSyncTime: getStorageSyncTime
}

这里比较时间的方法就是使用parse方法。

parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。就可以对时间进行比较