图片上传使用本地存储

在处理图片上传时，有时我们可能会选择将图片暂存于本地存储，而不是直接通过网络上传。这通常发生在用户预览或编辑未完成上传的图片，或者为了提高性能避免频繁的网络请求。在JavaScript中，我们可以使用浏览器的`FileReader` API配合HTML5的`localStorage`来实现。

以下是基本步骤：

1. 用户选择图片后，获取File对象：

   const fileInput = document.getElementById('file-input');
   fileInput.addEventListener('change', (e) => {
     const file = e.target.files[0];
   });

2. 使用`FileReader`读取图片内容并转换为Base64编码：

   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function (event) {
     const base64String = event.target.result;
   };

3. 将Base64字符串保存到localStorage：

   localStorage.setItem('imageKey', base64String);

4. 当需要显示图片时，从localStorage中取出：

   const storedImage = localStorage.getItem('imageKey');
   if (storedImage) {
     // 创建一个img元素，设置其src属性为Base64字符串
     const img = document.createElement('img');
     img.src = storedImage;
     // 添加到DOM中显示
     document.body.appendChild(img);
   }

注意：localStorage有一定的大小限制（一般在5MB左右），并且由于安全性考虑，它并不适合存放敏感数据，长期存储还是推荐使用服务器端的临时存储机制。