将输入图像保存在 localStorage 中，然后使用 JS 检索它答案

【问题标题】：Save an input image in localStorage and then retrieve it using JS将输入图像保存在 localStorage 中，然后使用 JS 检索它
【发布时间】：2021-06-29 11:20:03
【问题描述】：

我正在上传一张包含其他信息的图片，然后我想将它们一起保存（可能在一个数组中）在 localStorage 中。

如何仅使用 JS 在输入中检索该图像并将其与其他信息一起保存？我用来上传图片的代码如下（我从另一个 Stackoverflow 问题中得到它，它也有效）。

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("food");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

html:

<div class="immagine_cibo">
      <input type="file" onchange="onFileSelected(event)">
      <img id="food" height="200" width="250">
</div>

【问题讨论】：

标签： javascript arrays file-upload local-storage session-storage

【解决方案1】：

如果您有“imgtag.src = event.target.result”，则 event.target.result 是一个 base64 编码数据字符串。您可以使用 localStorage.setItem('myPic', event.target.result); 将其保存在本地存储中；

如果你想保存一个数组，你需要先对其进行json.encode，因为localStorage只能保存字符串。

【讨论】：