So kann man Bilder im localstorage speichern. In diesem Beispiel geht der Link aber nur, wenn ihr Bilder zur gleichen Domain nimmt
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basti1012 Save Image to localStorage</title>
<style>
body {
font: 12px "Helvetica Neue", "Helvetica", sans-serif;
background: #ccc;
}
h1 {
margin-top: 0;
}
img {
padding: 10px;
box-shadow: 0 0 10px 2px #ccc;
margin-bottom: 5px;
}
figcaption {
font-style: italic;
}
.container {
width: 900px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
padding: 30px;
}
header {
margin-bottom: 20px;
border-bottom: 1px solid #000;
}
.main-content {
overflow: hidden;
}
.additional-content {
float: right;
width: 300px;
height: 400px;
padding: 10px;
background: #ccc;
border-radius: 5px
}
.page-footer {
border-top: 1px solid #000;
margin-top: 30px;
padding-top: 10px;
}
h3{
text-align:center;
display:inline-block;
}
label{
font-size:19px;
width:250px;
text-align:center;
display:inline-block;
}
label,p{
font-size:19px;
text-align:center;
display:inline-block;
}
hr{
width:100;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container">
<header class="header" role="banner">
<h1>Speicher Ein Bild in localstorage()</h1>
</header>
<div class="main">
<article class="main-content" role="main">
<h2>Gebe eine Url ein die zu einen Bild führt auf den gleichen domain.Danach gebe einen Namen ein wo drunter
das Javascript dein Bild wieder findet</h2>
<label>Url des Bildes:</label>
<input type="text" id="bild" value="https://basti1012.bplaced.net/siteimage/info-box-css.jpg">
<br><label>Speichername:r</label>
<input type="text" id="localname" value="bild1">
<input type="button" id="save" value="Save To Localstorage">
<hr>
<h2>Nach erfolgreichen Speichern wird hier das Bild aus den Localstorage angezeigt</h2>
<figure>
<div id="rhino"></div>
<figcaption>Hier erscheint gleich dein Bild </figcaption>
</figure>
</article>
</div>
<hr>
<div id="rein"></div>
<div style="display:flex;flex-direction:column;">
<h2>Nach einen Reload der Seite erscheint bei erfolgreicher Seicherung dein Bild aus den Localstorge</h2>
<p>Es wird keine Url gespeichert ,sondern das Bild als data:image,und ist somit auf den Rechner vorhanden
Hier ist der Code zum einfügen des LocalStorage Bildes</p>
<div>
<textarea id="co" style="width:700px;height:100px;">
<div id="YOURDIVID"></div>
<script>document.getElementById('YOURDIVID').innerHTML='<img src="'+localStorage.getItem('${name}')+'">';
</script>
</textarea>
</div>
<div id="rein"></div>
</div>
<script>
hh=document.getElementById('save');
hh.addEventListener('click',function(){
bild=document.getElementById('bild').value;
name=document.getElementById('localname').value;
document.getElementById('co').value=""+document.getElementById('co').value+"";
var rhinoStorage = localStorage.getItem(name),
rhino = document.getElementById("rhino");
if (rhinoStorage) {
rhino.innerHTML='<img src="'+rhinoStorage+'" alt="Noch leer">';
// rhino.setAttribute("src", rhinoStorage);
}else {
var xhr = new XMLHttpRequest(),
blob,
fileReader = new FileReader();
xhr.open("GET", bild, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
blob = new Blob([xhr.response], {type: "image/png"});
fileReader.onload = function (evt) {
var result = evt.target.result;
rhino.setAttribute("src", result);
try {
localStorage.setItem(name, result);
}catch (e) {
console.log("Storage failed: " + e);
}
};
fileReader.readAsDataURL(blob);
}
}, false);
xhr.send();
}
document.getElementById('rein').innerHTML='<img src="'+localStorage.getItem(name)+'">';
});
</script>
</body>
</html>