1

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

我有一个 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本地并将其保存在本地？

4

2 回答 2

3

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

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAABSElEQVR42mP8DwQMeMDfrx8Z7uc6gWn59g0MHEo6KPKMhAwAgZezaxg + 7FnBwMzNDzaEVVyWNANA4Fl / LsPnE9vBLpCpWQg2DKcBPx4cZPjz4QEDj0E8ileetMQz / Lh3hYHXwpNBqnAybgNeLg8EG8IioMAg6FjPwKXhDxb // fIxw8PKALBhAi4RDOKpLdgNANn + fn8jw7cbG8F8ZINghoCA4uR9 + MPg348PDB + PTwQbBDIUZJCwZz9QQhgsDwoPDAMu7FzIwM7Fy8AnIsMgIq8BZPOBNf96cRFsGBMHP4N45HrcsTAr3QTDJUrGLkDDNBmEuL4xiMlqMXAo2OM2AOSCNw + VM / z89onh6fVTGIalzTyDmZDS09PBnJkzZ2JoABn05uENhk9vngDZnxkM3OMZkNVjGABj4wLIamhjADEApwGkAqoYAABh69q0dfMNBwAAAABJRU5ErkJggg ==

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

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

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

于 2012-08-03T17:56:03.710 回答
0

以防万一您不考虑图像，而实际上只是指 HTML，因为上面的人确实很好地回答了 localStorage 和 dataURL，您会做这样的事情......

localStorage['imageContainerHTML'] = document.getElementById('imageContainer').innerHTML;

这只是存储 HTML，而不是图像。对于图像，请使用其他人的建议。

于 2012-08-03T22:56:13.657 回答