javascript - 如何将图像放入 javascript localstorage 条目中

Question

我现在正在使用 javascript localstorage 创建一个应用程序，您可以在其中创建带有标题、图像、描述和位置的条目。一切正常，除了我不知道如何处理图像。这是我用来创建条目的代码：

var json_entry = {'title': titleField.val(),
                  'image': $("#image").val(),
                  'content': contentField.val(),
                  'location': location};

正如您现在所看到的，我只是使用文件字段的值。这在我的条目中添加了一条虚假路径。显然，使用本地存储处理图像并不像我想象的那么简单。谁能给我一个代码示例，说明如何使这项工作？

Answer 1

将整个对象存储在 localStorage 中（当然是字符串化的）：

localStorage.setItem(imageEntry, JSON.stringify(json_entry));

Answer 2

由于安全原因，您不能这样做。您必须上传图片并将网址存储到上传的图片。

您也许可以考虑使用 File API 将图像的 base64 版本存储在 localStorage 中。这是关于它的快速教程。

想一想，如果您可以在用户机器上存储文件路径并在需要时调用它，您可以非常轻松地请求类似C:\My Documents\Sensitive Data.

Answer 3

抱歉，我来晚了才来帮忙。

var json_entry = [];

json.push({
           title: titleField.val(),
           image: $("#image").val(),
           content: contentField.val(),
           location: location
          });

localstorage.setItem("imageDetail", JSON.stringify(json));