jquery - 如何使用Jquery将个人资料图像存储在本地存储中

Question

我正在尝试使用 jquery 在本地存储中上传和存储个人资料图像(用于一个演示目的)。我刚刚上传了一部分，不知道如何将该图像存储在本地存储中。请检查这个fiddle并帮我解决这个问题。谢谢。

 function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#bannerImg').attr('src', reader.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$(".file-upload").change(function() {
  readURL(this);
});

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});

Answer 1

将文件保存为base64并从本地存储加载它。希望这对您有帮助。
https://jsfiddle.net/RemyaJ/f9wfftft/4/

if(localStorage.img) { 
    $('#bannerImg').attr('src', localStorage.img);
    }
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
        localStorage.setItem('img', e.target.result);
          $('#bannerImg').attr('src', reader.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

    $(".file-upload").change(function() {
      readURL(this);
    });

    $(".upload-button").on('click', function() {
      $(".file-upload").click();
    });