javascript - 如何将图像附加到本地存储？

Question

我正在尝试将图像附加到本地存储。

我有一个 div，我想保存所有这些图像。像这样简单的东西:

<div id="imageContainer">
<!--have images go here-->
</div>

我想要完成的是这样的:

if (Math.floor((Math.random()*3)+1) == 1) { // 1/3 chance of conditional being true
  // append some image to #imageContainer and have it locally stored
} else {
  alert('no luck this time...');
}

那么，每次上述条件为真时，我如何将图像附加到 #imageContainer 并将其保存在本地？

Answer 1

如果图像很小，您可以将图像作为 base64 编码的数据 URI 存储在 localStorage 中。例如，这里是 StackOverflow 图像 data URI :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSElEQVR42mP8DwQMeMDfrx8Z7uc6gWn59g0MHEo6KPKMhAwAgZezaxg+7FnBwMzNDzaEVVyWNANA4Fl/LsPnE9vBLpCpWQg2DKcBPx4cZPjz4QEDj0E8ileetMQz/Lh3hYHXwpNBqnAybgNeLg8EG8IioMAg6FjPwKXhDxb//fIxw8PKALBhAi4RDOKpLdgNANn+fn8jw7cbG8F8ZINghoCA4uR9+MPg348PDB+PTwQbBDIUZJCwZz9QQhgsDwoPDAMu7FzIwM7Fy8AnIsMgIq8BZPOBNf96cRFsGBMHP4N45HrcsTAr3QTDJUrGLkDDNBmEuL4xiMlqMXAo2OM2AOSCNw+vM/z89onh6fVTGIalzTyDmZDS09PBnJkzZ2JoABn05uENhk9vngDZnxkM3OMZkNVjGABj4wLIamhjADEApwGkAqoYAABh69q0dfMNBwAAAABJRU5ErkJggg==

所以你会在这样的图像中显示:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAA...[snip]" />

您所要做的就是创建一个 <img>并设置 src属性到数据 URI。