如何在刷新後保留localStorage值？

這是我CTRL：如何在刷新後保留localStorage值？

app.controller('ctrl', function ($window, $scope) { 

    $scope.initData = [ 
     { 
      firstName: "John", 
      lastName: "Doe", 
     }, 
     { 
      firstName: "Jane", 
      lastName: "Doe", 
     }, 
     { 
      firstName: "John", 
      lastName: "Smith", 
     } 
    ]; 

    $window.localStorage.setItem('initData', JSON.stringify($scope.initData)); 
    $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData')); 
    $scope.sortedType = 'firstName'; 
    $scope.sortedReverse = false; 
    //Remove Rows and Update localStorage Key Values 
    $scope.removeRow = function(row) { 
     $scope.retrievedData.splice(row, 1); 
     $scope.initData.splice(row, 1); 
     $window.localStorage.setItem('initData', JSON.stringify($scope.initData)); 
    } 
});

HTML：

<table class="table table-bordered table-striped table-hover"> 
       <thead> 
       <tr> 
        <th> 
         <span ng-show="sortedType == 'firstName' && sortedReverse" class="fa fa-long-arrow-up"></span> 
         <span ng-show="sortedType == 'firstName' && !sortedReverse" class="fa fa-long-arrow-down"></span> 
         <span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;">First Name</span> 
        </th> 
        <th> 
         <span ng-show="sortedType == 'lastName' && sortedReverse" class="fa fa-long-arrow-up"></span> 
         <span ng-show="sortedType == 'lastName' && !sortedReverse" class="fa fa-long-arrow-down"></span> 
         <span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;">Last Name</span> 
        </th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse"> 
       <td>{{v.firstName}}</td> 
       <td>{{v.lastName}}</td> 
       <td> 
        <button class="btn btn-primary">Edit</button> 
        <button class="btn btn-primary" ng-click="removeRow();">Delete</button> 
       </td> 
      </tr> 
      </tbody> 
     </table>

現在，我認爲這是明顯的這是什麼一樣。它將$scope.initData中的數據分配給localStorage，然後將其插入到HTML中。功能removeRow()將刪除表中的行並使用最新操作更新localStorage。與此相關的問題是，每次我重新加載HTML數據時，都會加載最初的localStorage數據，而不是更新後的數據。我知道這是因爲我在這裏分配它：$window.localStorage.setItem('initData', JSON.stringify($scope.initData));但我不知道如何在刷新後保持更新。

請指教。

謝謝。

來源

2017-06-15 tholo

您的行$window.localStorage.setItem('initData', JSON.stringify($scope.initData));會在您每次刷新時重置數據。

這種替換行：

if(!localStorage.getItem('initData')){ 
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData)); 
}

更多了，你不應該有該行的。從空的本地存儲開始，僅從UI添加新條目。

上面的代碼只運行一次，第一次運行應用程序。

如果喲想每一個列表爲空時重新插入數據，那麼試試下面

if(!localStorage.getItem('initData') || JSON.parse(localStorage.getItem('initData')).length === 0){ 
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData)); 
}

來源

2017-06-15 10:14:40 BiJ

我應該有這條線..我需要有一些初始數據，因此線。 :) – tholo

然後，你應該添加條件檢查，看看是否沒有數據，然後只插入。 – BiJ

你還在嗎？這有一個問題。 – tholo

在每一個頁面加載你設置新initData和更新本地存儲......相反，你應該檢查現有localStorage的數據和使用，使用嘲笑initData

來源

2017-06-15 10:15:14 Chetan

之前，您需要檢查第一如果您的localStorage是負載空

if (localStorage == null) {//setItem() ...};

來源

2017-06-15 10:20:37 Jonathan

你的意思是'if（localStorage == null ）{};'？ :) – tholo

是的！對不起，錯字;檢查你的localoStorage是不是空的，如果它是空的，你可以setItem – Jonathan

如何在刷新後保留localStorage值？

回答

相關問題