网站备案照相,建设门户网站系统的必要性,编辑目录中的字体 wordpress,中国万网域名注册服务内容也许今天比较无聊#xff0c;突然想前端怎么把图片缓存的本地#xff1f;如果是数据流#xff0c;直接保存到localStorage#xff0c;但是如果是网络url地址怎么办#xff1f;存个url肯定没有什么意义#xff0c;苦思冥想还是把图片保存为base64格式#xff0c;这又遇到… 也许今天比较无聊突然想前端怎么把图片缓存的本地如果是数据流直接保存到localStorage但是如果是网络url地址怎么办存个url肯定没有什么意义苦思冥想还是把图片保存为base64格式这又遇到了问题怎么才能把url转成base64呢于是就想到了canvas。 以react为例首先接口获取数据在取到数据后先判断有没有缓存如果有就取缓存中的数据如果没有则使用canvas将其转化成base64存储就可以了。为了方便操作在localStorage存储中添加了一个更新时间如果想更新缓存可以改变时间就可以了其次用url当key值主要是为了方便取用。
import React, { useState, useEffect } from react
const CacheImg () {let [imgURL, setImgURL] useState()useEffect(() {getData()}, [])const getData () {new Promise(resolve {// 这里模仿接口发送异步请求let data {updateTime: 2023-11-09 12:00:00,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg}resolve(data)}).then(res {let localData JSON.parse(localStorage.getItem(cacheUrls)) || {}// 先获取本地存储的数据当更新时间和url都一样时就取缓存数据if (localData.updateTime res.updateTime localData[res.url]) {setImgURL(localData[res.url])} else {let canvas document.createElement(canvas)let ctx canvas.getContext(2d)let image new Image()// 解决图片跨域image.crossOrigin Anonymousimage.src res.urlimage.onload () {canvas.width image.widthcanvas.height image.height// 绘制图片-在左上角的位置ctx.drawImage(image, 0, 0)// 存个更新时间方便更新let cacheObj {updateTime: res.updateTime,// https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg: }// 返回值是一个数据url是base64组成的图片的源数据cacheObj[res.url] canvas.toDataURL(image/png)// 本地存储localStorage.setItem(cacheUrls, JSON.stringify(cacheObj))setImgURL(cacheObj[res.url])// 清空canvascanvas null}}})}return div{imgURL ? img src{imgURL} / : }/div
}export default CacheImg
看一下network只有第一次会加载图片其他情况都会取缓存中的大大的节约了获取图片的时间你也许会说浏览器本身就带缓存可是在开发中有时候会开启无缓存模式这个时候对一成不变的图片还每次都加载岂不是浪费时间即便关了浏览器、关了电脑再打开也不会在去请求url。 为了防止保存很多无用的图片可以给localStorage设置一个过期时间虽然localStorage 本身没有提供设置有效期的方法但我们可以自己封装个方法来实现。
例如这样
Storage.prototype.setExpire (key, value, expire) {let obj {data: value,time: Date.now(),expire: expire,}//localStorage 设置的值不能为对象,转为json字符串localStorage.setItem(key, JSON.stringify(obj))
};
Storage.prototype.getExpire (key) {let val localStorage.getItem(key)if (!val) {return val}val JSON.parse(val)if (Date.now() - val.time val.expire) {localStorage.removeItem(key)return null}return val.data
};获取数据
let storage localStorage.getExpire(cacheUrls)设置数据
// 有效期七天
localStorage.setExpire(cacheUrls, vals, 86400000 * 7);
