个人中心
gpt4 book ai didi

javascript - 如何在 cookie JavaScript 中添加图片？

转载 作者：行者123 更新时间：2023-12-05 09:32:43 24 4
gpt4 key购买 nike

我正在制作一个网站，我想在我的帐户页面的 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。

最佳答案

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

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

    这样的小东西

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

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

  • 较新的(指定的)沙盒文件系统访问更好!但它在这一点上太新了，太实验了，也只能由 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 中的存储...这里是一个 fiddle :https://jsfiddle.net/2tnwku63/
(选择一张图片，重新加载页面 - 它仍然存在)

缓存不是用来存储文件的，只是请求 <-> 考虑到 service worker 的响应，但是如果你将文件转换为响应并在某些方面稍微滥用它，那么它可以作为一个扁平的、低级别的，沙盒文件系统 - 您是否需要更手动地跟踪您存储的内容。缓存存储中没有子文件夹的概念...在 + 端，您可以将大数据写入 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)) 来存储孔表单，然后你将保存所有输入字段，如果你必须返回页面和重新填写每个表单输入

关于javascript - 如何在 cookie JavaScript 中添加图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67763310/

24 4 0
文章推荐： javascript - Array.map 索引未定义？
文章推荐： python - Groupby 在 pandas 中求和并根据条件/要求自定义 df
文章推荐： swift - 如何只取当前时间 (hh :mm:ss format) from Date() in Swift?
文章推荐： javascript - typescript 中的条件类型可以依赖于自身的值吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com