如何在 cookie JavaScript 中添加图片？

Question

我正在制作一个网站，我想在我的帐户页面的 cookie 中存储一张图片。当我上传个人资料图片时，它可以正常工作，但是当我重新加载时，个人资料图片是默认图片，而不是我之前选择的图片。当我刷新页面时，如何使个人资料图片保持不变而不是默认图片？我的代码：

function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function(){
        var output = document.getElementById('output_image');
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
    

<!DOCTYPE html>
<html>
    <body>
        <img src="guest.png" id="output_image">
        <input type="file"accept="image/*"onchange="preview_image(event)" id="file">
    </body>
</html>

编辑：您现在可以使用 php。

Answer 1

你需要一个存储来做到这一点。因为您不是在任何地方“保存”图像，而只是使用它一次。如果它只是一个“测试”，您可以使用 localStorage 将此图像保存为 Blob。然后你应该在页面加载时从 localStorage 中获取它。

检查这个：Mozilla Window.localStorage

Answer 2

• 由于大小限制，Cookie 不是存储图像的好地方（它还会将每隔一个页面上的 cookie 发送到服务器并浪费数据）

• LocalStorage 也不好，因为它需要将二进制文件转换为 base64 并浪费空间和时间与 base64 进行转换。 LocalStorage 只是一个简单的键/值存储（作为字符串），并不意味着存储大数据或二进制文件。 localStorage 中的所有内容都必须在每次页面加载时加载到内存中，因此会降低性能。只保留theme: "dark-mode"之类的小东西

• IndexedDB 是一个可行的选择，但存储简单 blob（文件）所需的所有代码都不值得设置数据库/表和使用回调的复杂性

• Blinks 旧的沙盒文件系统也是 grate，但它已经过时并且没有在所有浏览器中实现

• 较新的（规范的）沙盒文件系统访问更好！但在这一点上它太新和实验性了，也只能由 Blink 背后的标志实现

还有另一个地方可以存储原始二进制数据：cache storage!

<input type=file id=$fileInput>
<img id="$imgElm">

// load image from cache on page load
caches.open('fs').then(cache => {
  cache.match('/preview_image')
    .then(res => res.blob())
    .then(blob => $imgElm.src = URL.createObjectURL(blob))
    .catch(() => { /* no img stored */})
})

$fileInput.onchange = async evt => {
  // preview the new image
  $imgElm.src = URL.createObjectURL($fileInput.files[0])
  // cache it
  const cache = await caches.open('fs')
  await cache.delete('/preview_image') // perhaps not needed
  await cache.put('/preview_image', new Response($fileInput.files[0]))
}

没有使用 SO 编辑器，因为它禁用了沙盒 iframe 中的存储...这里是一个小提琴：https://jsfiddle.net/2tnwku63/
（选择一张图片，重新加载页面 - 它仍然存在）

---

缓存不是用来存储文件的，只是请求 响应服务工作者，但是如果你将文件转换为响应并在某些方面滥用它，那么它可以作为一个平面，低级别，沙盒文件系统 - 您是否需要手动跟踪存储的内容。缓存存储中没有子文件夹的概念...在+端您可以将大数据写入为ReadableStream

---

如果你想更有创意，那么你总是可以通过这样做来存储一个洞FormData

const formData = new FormData()
formData.set('image_upload', file)

cache.put(req, new Response(formData))`

然后您可以使用response.formData().then(fd => fd.get('image_upload')) 来获取一个包含 FileName 作为 File 实例（而不是 blob）的实际文件，您始终可以通过执行 new Response(new FormData(formElm)) 来存储孔形式，然后您将拥有如果您必须返回页面并重新填写每个表单输入，则保存所有输入字段