AngularJS页面刷新后图片不显示问题求助（Firebase+localStorage场景）

嘿，我一眼就瞅出问题所在了——localStorage只能存储字符串类型的数据，你直接把数组$scope.backgroundImageURL存进去，它会被自动转成一个毫无意义的字符串（比如[object Object]或者数组字面量字符串），但刷新页面后你没把这个字符串转回数组，导致$scope.backgroundImageURL还是空数组，图片自然就不显示了。另外，你也没在页面初始化时从localStorage读取已保存的URL，这也是关键遗漏点。

下面是具体的修复步骤：

1. 修复localStorage的存储与读取逻辑 #

localStorage不支持直接存储数组/对象，必须先序列化为JSON字符串，读取时再反序列化为数组：

存储时修改： #

把原代码里的：

localStorage.setItem('userImageURL', $scope.backgroundImageURL);

改成：

localStorage.setItem('userImageURL', JSON.stringify($scope.backgroundImageURL));

读取时（页面初始化）： #

在你的控制器开头添加这段代码，用来加载已保存的图片URL：

// 页面初始化时读取localStorage中的图片URL
var savedImageURLs = localStorage.getItem('userImageURL');
// 如果有保存的数据，就解析成数组；否则初始化空数组
$scope.backgroundImageURL = savedImageURLs ? JSON.parse(savedImageURLs) : [];

2. 完整修复后的代码示例 #

控制器代码： #

// 页面初始化时加载已保存的图片URL
var savedImageURLs = localStorage.getItem('userImageURL');
$scope.backgroundImageURL = savedImageURLs ? JSON.parse(savedImageURLs) : [];
$scope.currentUserObject = {};

$scope.uploadBackgroundImage = function(event) {
    // 获取当前登录用户的用户名
    $scope.currentUserObject = localStorage.getItem('userName');
    // 获取上传的文件
    var userProductImg = $("#getImageAttribute")[0].files[0];
    var PRODUCT_STORAGE_REF = firebase.storage().ref('user/image');
    // 生成唯一文件名（用时间戳）
    var rn = new Date().getTime().toString();
    var task = PRODUCT_STORAGE_REF.child("loggedInUserObject").child($scope.currentUserObject).child(rn).put(userProductImg).then(function(snapshot) {
        $timeout(function(){
            // 添加新的图片URL到数组
            $scope.backgroundImageURL.push(snapshot.downloadURL);
            // 序列化数组后存入localStorage
            localStorage.setItem('userImageURL', JSON.stringify($scope.backgroundImageURL));
        }, 50);
    })
}

模板代码（无需修改，保持原样即可）： #

<input type="file" id="getImageAttribute" ng-click="$event = $event" ng-model="display" multiple onchange="angular.element(this).scope().uploadBackgroundImage(event)" />
<span ng-repeat="imgURL in backgroundImageURL">
    <img src="{{imgURL}}">
</span>

额外优化建议 #

• 尽量避免用jQuery选择器（$("#getImageAttribute")），可以改成用Angular的ng-model或者element引用，更符合Angular的开发规范。
• 如果userName存储的是对象而不是字符串，也要用JSON.parse()和JSON.stringify()来处理，避免出现类似的问题。

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