如何在AngularJS中添加localStorage保存选中图片，刷新后不丢失？

核心修改逻辑 #

要实现图片刷新或重启浏览器后依然显示，只需完成两个关键操作：

• 页面初始化时从localStorage读取已保存的图片数据
• 选中新图片时将数据写入localStorage

1. 控制器初始化时读取localStorage #

修改UploadController，在初始化阶段检查localStorage中是否有保存的图片数据，有则直接赋值给$scope.imageSrc：

app.controller('UploadController', function($scope, fileReader) {
  // 从localStorage读取已存图片，无数据则设为空字符串
  $scope.imageSrc = localStorage.getItem('savedImage') || "";
  
  $scope.$on("fileProgress", function(e, progress) {
    $scope.progress = progress.loaded / progress.total;
  });
});

2. 选中图片时写入localStorage #

修改ngFileSelect指令的getFile函数，在获取到图片base64数据并绑定到视图后，将数据存入localStorage：

function getFile(file) {
  fileReader.readAsDataUrl(file, $scope)
    .then(function(result) {
      $timeout(function() {
        $scope.ngModel = result;
        // 将图片base64数据存入localStorage
        localStorage.setItem('savedImage', result);
      });
    });
}

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Photo and store on localStorage using AngularJS 1.X</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>

    <style>
        img{width:200px; height:200px;}
    </style>
</head>

<body>
  <div ng-app="plunkr">
    <div ng-controller="UploadController">
        <form>
          <input type="file" ng-file-select="onFileSelect($files)" ng-model="imageSrc">
          <!--  <input type="file" ng-file-select="onFileSelect($files)" multiple> -->
        </form>
        
        <img ng-src="{{imageSrc}}" />
          
      </div>
    </div>

        <script>

var app = angular.module('plunkr', [])
  app.controller('UploadController', function($scope, fileReader) {
    // 初始化读取localStorage中的图片数据
    $scope.imageSrc = localStorage.getItem('savedImage') || "";
    
    $scope.$on("fileProgress", function(e, progress) {
      $scope.progress = progress.loaded / progress.total;
    });
  });


  app.directive("ngFileSelect", function(fileReader, $timeout) {
    return {
      scope: {
        ngModel: '='
      },
      link: function($scope, el) {
        function getFile(file) {
          fileReader.readAsDataUrl(file, $scope)
            .then(function(result) {
              $timeout(function() {
                $scope.ngModel = result;
                // 将图片数据存入localStorage
                localStorage.setItem('savedImage', result);
              });
            });
        }

        el.bind("change", function(e) {
          var file = (e.srcElement || e.target).files[0];
          getFile(file);
        });
      }
    };
  });

app.factory("fileReader", function($q, $log) {
  var onLoad = function(reader, deferred, scope) {
    return function() {
      scope.$apply(function() {
        deferred.resolve(reader.result);
      });
    };
  };

  var onError = function(reader, deferred, scope) {
    return function() {
      scope.$apply(function() {
        deferred.reject(reader.result);
      });
    };
  };

  var onProgress = function(reader, scope) {
    return function(event) {
      scope.$broadcast("fileProgress", {
        total: event.total,
        loaded: event.loaded
      });
    };
  };

  var getReader = function(deferred, scope) {
    var reader = new FileReader();
    reader.onload = onLoad(reader, deferred, scope);
    reader.onerror = onError(reader, deferred, scope);
    reader.onprogress = onProgress(reader, scope);
    return reader;
  };

  var readAsDataURL = function(file, scope) {
    var deferred = $q.defer();

    var reader = getReader(deferred, scope);
    reader.readAsDataURL(file);

    return deferred.promise;
  };

  return {
    readAsDataUrl: readAsDataURL
  };
});
          
          </script>

</body> 
</html>

补充说明 #

• localStorage存储的是字符串类型，图片的base64格式本身就是字符串，因此可直接存储和读取
• 每次选中新图片会覆盖localStorage中的旧数据，若需保存多张图片，可改用数组存储并通过JSON.stringify()和JSON.parse()进行序列化/反序列化
• localStorage有存储大小限制（通常约5MB），过大的图片可能无法存储，建议提前对图片进行压缩处理

内容的提问来源于stack exchange，提问作者Jhoy