saber酱的抱枕

Fly me to the moon

12/30
08:00
学习

使用FileReader读取并将文件存储在localStorage中

本文要做的事情是,用户通过file控件选择一个文件,之后我们使用FileReader将其转换为base64编码,并储存在LocalStorage里。

如下代码,在用户选择一张图片时,程序会将图片以base64编码保存到LocalStorage里,然后把这张图作为网页的背景图片。

<input type="file" name="img">
<br>
<input type="button" name="clearMyBG" value="清除我的设置">
<script>
// 尝试读取localStorage中存储的背景图片,如果有就设置
var myBGStorage = localStorage.getItem("myBG");
if (myBGStorage) {
 document.body.style.backgroundImage="url("+myBGStorage+")";
}

// 将选择的文件储存在localStorage里
document.querySelector("input[name=img]").addEventListener("change",function(){
	if (!/image\/\w/.test(this.files[0].type)) {
		alert("请确保文件为图像类型");
		return false;
	}
	setMyBG(this.files[0]);
})

//清除存储的背景图片
document.querySelector("input[name=clearMyBG]").addEventListener("click",function(){
	localStorage.removeItem("myBG");
	alert("设置已清除");
	location.reload();
})

//转换、存储和设置背景图片
function setMyBG (imgfile){
	var fileReader = new FileReader();
	fileReader.readAsDataURL(imgfile);
	fileReader.onload=function(){
		var result = this.result;
		document.body.style.backgroundImage="url("+result+")";
		try {
			localStorage.setItem("myBG", result);
		}catch (e) {
			console.log("Storage failed: " + e);
		}
	}
}
</script>

如下图,是localStorage中存储的键值对。注意localStorage的值都会被转换成string类型的。

使用FileReader读取并将文件存储在localStorage中

相关资料:
FileReader localStorage

有一个检测localStorage容量上限的工具:
Test of localStorage

它会在你的localStorage里存储数据,直到塞满为止。chrome约为5M。据说opera和firefox可以自己调整限制,厉害了。

利用localStorage本地存储可以做一些有意思的事情,比如说上面的代码的功能,就是让网站上每个访客都可以设置自己喜欢的背景图片。只要点下鼠标,从自己电脑里选择一张图片就可以了。而且这些背景图片储存在浏览器的LocalStorage里,不需要懂web知识,不需要获取万维网url,不占用网络存储空间,而且是永久存储,岂不美哉?而且还可以用一些羞羞的图(划掉)

你可以在下面尝试设置自己的背景图片:
(仅本页有效,刷新不会失效,如需恢复成我设置的随机的背景图片,请点击“清除我的设置”按钮)




虽然LocalStorage有每个站点5M的存储上限(不严谨的说法),不过还是可以存多张图片的。现在只做了让用户设置一张背景图片的功能,考虑得高大上一些的话,可以让用户储存多张图片并随机。不过这样的话需要做个管理界面了——。

使用FileReader读取并将文件存储在localStorage中