我尝试使用Ajax请求在localStorage中存储图像.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var storedImage;
if (localStorage.getItem('imgtest')) {
storedImage = localStorage.getItem('imgtest');
alert("get");
}
else {
storedImage = xmlhttp.responseText;
localStorage.setItem('imgtest',storedImage);
alert("set");
}
document.getElementById("test").style.backgroundImage = 'data:image/png;base64,' + storedImage;
}
}
xmlhttp.open("GET","img.png");
xmlhttp.setRequestHeader("Content-type","image/png");
xmlhttp.send();
}
</script>
</head>
<body>
<div id="test" style="width: 100px; height: 100px;"></div>
</body>
</html>
我可以存储流,但不显示图像.
也许是因为我的编码,我不知道.
你能告诉我我做错了什么或者有更好的方法吗？
解决方法
@H_502_19@ 您是否尝试过像这样的url()：document.getElementById(“test”).style.backgroundImage =’url(data：image / png; base64,’storedImage’)’;
