H5 localStorage 缓存图片

栏目: Html5 · 发布时间: 7年前

内容简介：发表于 2018-10-23 11:16:48 by月小升利用ajax XHR对象可以创建获取图片流，将一个图片转换成DATAURL的模式存储到本地

发表于 2018-10-23 11:16:48 by月小升

利用ajax XHR对象可以创建获取图片流，将一个图片转换成DATAURL的模式存储到本地

<!DOCTYPE HTML>
<html>
<body>
<figure>
 <img id="glassesgirl" src="" alt="A girl">
glasses girl
</figure>
 
<script type="text/javascript">
 
// 获取文件
var glassesgirlStorage = localStorage.getItem("glassesgirl"),
glassesgirl = document.getElementById("glassesgirl");
if (glassesgirlStorage) {
	 //如果已经存在则直接重用已保存的数据
	console.log("From Cache");
 	glassesgirl.setAttribute("src", glassesgirlStorage);
}else{
	 // 创建XHR, BlobBuilder 和FileReader 对象
	 var xhr = new XMLHttpRequest();
 
	var fileReader = new FileReader();
 
	 xhr.open("GET", "glasses.jpg", true);
 
	 xhr.responseType = 'blob';
 
	 //https://developer.mozilla.org/zh-CN/docs/Web/API/Blob    Blob可以用于存贮对象
	 //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
	 xhr.addEventListener("load", function () {
		 if (xhr.status === 200) {
			 var blob = this.response;
			fileReader.onload = function (evt) {
				 // 用Data URI的格式读取文件内容
			 	var result = evt.target.result; //要点
			 	// 将图片的src指向Data URI
			 	glassesgirl.setAttribute("src", result);
			 	//保存到本地存储中
				 try {
					 localStorage.setItem("glassesgirl", result);
				 }
				 catch (e) {
				 console.log("Storage failed: " + e);
				 }
			 };
			 // 以Data URI的形式加载blob
			 fileReader.readAsDataURL(blob);
		 }
	 }, false);
	 // 发送异步请求
	 xhr.send();
}
 
 
</script> 
 
 
</body>
</html>

H5 localStorage 缓存图片

图片头

data:image/jpeg;base64,/9j/4A

H5 localStorage 缓存图片

注意地址要是本地服务器地址

http://localhost/javaer/h5/hfiles.html

或者线上地址

http://java-er.com/hfiles.html

否则XHR会因为跨域问题，无法访问

你会不会问，java-er.com这个小博客研究这个这能做什么。其实缓存图片的确干不了啥，因为5M，不过可以缓存个小图标啥得，也没什么意义。本文为了研究本地化存储，当 localStorage 换成indexDB就会突破5M的限制，将图片转换为本地存贮的技术是一样的。

我研究这个是因为我要缓存小音频文件，方便地铁上断网的时候，也能听。

不过我目前为止也只能借XHR的请求来转换。其实我想用 php 直接给转换成这个字符串，传给js对象就完事了。

首发地址：–

无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢

以上所述就是小编给大家介绍的《H5 localStorage 缓存图片》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Usability for the Web

Tom Brinck、Darren Gergle、Scott D. Wood / Morgan Kaufmann / 2001-10-15 / USD 65.95

Every stage in the design of a new web site is an opportunity to meet or miss deadlines and budgetary goals. Every stage is an opportunity to boost or undercut the site's usability. Thi......一起来看看《Usability for the Web》这本书的介绍吧!

码农工具

H5 localStorage 缓存图片

Usability for the Web

RGB转16进制工具

URL 编码/解码

SHA 加密