我尝试使用 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>
我可以存储流,但不显示图像。
也许是因为我的编码,我不知道。你能告诉我我做错了什么或者是否有更好的方法来做到这一点?