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 缓存图片》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

学习JavaScript数据结构与算法（第2版）

[巴西] Loiane Groner / 邓　钢、孙晓博、吴　双、陈　迪、袁　源 / 人民邮电出版社 / 2017-9 / 49.00元

本书首先介绍了JavaScript 语言的基础知识以及ES6 和ES7 中引入的新功能，接下来讨论了数组、栈、队列、链表、集合、字典、散列表、树、图等数据结构，之后探讨了各种排序和搜索算法，包括冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序、顺序搜索、二分搜索，然后介绍了动态规划和贪心算法等常用的高级算法以及函数式编程，最后还介绍了如何计算算法的复杂度。一起来看看《学习JavaScript数据结构与算法（第2版）》这本书的介绍吧!

码农工具

在线进制转换器

各进制数互转换器

H5 localStorage 缓存图片

学习JavaScript数据结构与算法（第2版）

在线进制转换器

html转js在线工具