HTML5 使用localStorage本地缓存图片

最新推荐文章于 2024-06-25 20:29:52 发布

Sun_逸圣

最新推荐文章于 2024-06-25 20:29:52 发布

阅读量1.4w

点赞数

分类专栏： html5 文章标签： html5 缓存

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网站上找到了一些localStorage的实例，但是都无法直接使用，研究了一下。现在把案例贴出来。

案例如下：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="anonymous">
<title>locstorage 图片存储</title>
</head>

<body>


<img id="acc" src="about:blank" alt="A close up of an elephant">

</body>
</html>
<script>

var gsFiles = JSON.parse(localStorage.getItem("gsFiles")) || {};
var a = document.getElementById("acc");
gsFilesDate = gsFiles.date;

date = new Date();
todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();

// 检查数据，如果不存在或者数据过期，则创建一个本地存储
if (typeof gsFilesDate === "undefined" || gsFilesDate < todaysDate) {

// 图片加载完成后执行


a.addEventListener("load", function () {

var imgCanvas = document.createElement("canvas");
imgContext = imgCanvas.getContext("2d");
// 确保canvas尺寸和图片一致
imgCanvas.width = a.width;
imgCanvas.height = a.height;
// 在canvas中绘制图片
imgContext.drawImage(a, 0, 0, a.width, a.height);

// 将图片保存为Data URI
gsFiles.a = imgCanvas.toDataURL("bj.png");

gsFiles.date = todaysDate;

// 将JSON保存到本地存储中
try {
localStorage.setItem("gsFiles", JSON.stringify(gsFiles));

}
catch (e) {
console.log("Storage failed: " + e);
}
}, false);
// 设置图片
a.setAttribute("src", "bj.png");
}
else {
// Use image from localStorage
a.setAttribute("src", gsFiles.a);
}
</script>

运行后，使用浏览器的开发者模式，可以再Resources里面的Local Storage（本地缓存）里面看到存进去的图片。

注：页面和图片一定要放在服务器里面，通过服务器来访问！便捷一点的可以使用phpStudy,把网页和图片放在WWW文件夹下面，就可以访问了

例：http://localhost:8090/1111.HTML

Sun_逸圣

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5 使用localStorage本地缓存图片

在网站上找到了一些localStorage的实例，但是都无法直接使用，研究了一下。现在把案例贴出来。案例如下：locstorage 图片存储 var gsFiles = JSON.parse(localStorage.getItem("gsFiles")) || {};var a = document
复制链接

扫一扫

专栏目录