如何在AngularJS中使用localstorage？

當我將新任務添加到我的任務管理器時，它會將其保存在localStorage中，但無法在不更新的情況下在頁面上顯示它。我需要使用$ watch還是別的東西？如何在AngularJS中使用localstorage？

代碼是在這裏：

$scope.retrievedTasks = JSON.parse(localStorage.getItem('tasks')); 
 
$scope.addTask = function() { 
 
    console.log($scope.retrievedTasks) 
 
    console.log($scope.tasks) 
 
    if ($scope.newTaskName) { 
 
    $scope.tasks.push({ 
 
     taskName: $scope.newTaskName, 
 
     status: false 
 
    }); 
 
    localStorage.setItem('tasks', JSON.stringify($scope.tasks)); 
 
    $scope.newTaskName = ""; 
 
    } 
 
};

<tr ng-repeat="task in retrievedTasks"> 
 
    <td> 
 
    <button class="btn btn-danger" ng-click="deleteTask(task)">Delete</button> 
 
    <!-- $index--> 
 
    </td> 
 
    <td>{{task.taskName}}</td> 
 
    <td> 
 
    <input type="checkbox" ng-model="statusCheck"> </td> 
 
    <td style="{{setStyleToTd(statusCheck)}}">{{statusChecker(statusCheck)}}</td> 
 
    <td> 
 
    <button class="btn btn-primary" ng-click="editTask(task)">Edit</button> 
 
    </td> 
 
</tr>

來源

2017-08-23 ttmcswg

還我試圖用$ window.localstorage但它沒有工作:( – ttmcswg

你確實需要兩個範圍變量 - $ scope.retrievedTasks和$ scope.tasks如果沒有，只需更換$ scope.retrievedTasks與$ scope.tasks在html和js。 –

您的視圖是使用retrievedTasks而您的控制器更新$scope.tasks所以如果你想使用retrievedTasks，讓您應該確保將其推到該列表

$scope.addTask = function() { 
    if ($scope.newTaskName) { 
     $scope.retrievedTasks.push({ 
      taskName: $scope.newTaskName 
      , status: false 
     }); 
     localStorage.setItem('tasks', JSON.stringify($scope.retrievedTasks)); 
     $scope.newTaskName = ""; 
    } 
};

來源

2017-08-23 13:30:39 Ero

不工作:(它顯示錯誤 – ttmcswg

什麼錯誤顯示？ – Ero

控制檯中的一些角度錯誤，也許它是因爲我使用localstorage而不是角度替代？我看過一些$ localStorage的東西 – ttmcswg

希望它能幫助你。

$scope.retrievedTasks = JSON.parse(localStorage.getItem('tasks')); 
$scope.addTask = function() 
{ 
    console.log($scope.retrievedTasks) 
    console.log($scope.tasks) 
    if ($scope.newTaskName) { 
    $scope.tasks = { 
     taskName: $scope.newTaskName, 
     status: false 
    }; 
    localStorage.setItem('tasks', JSON.stringify($scope.tasks)); 
    $scope.newTaskName = ""; 
    } 
};`enter code here`

來源

2017-08-23 13:49:02 Nikita

如何在AngularJS中使用localstorage？

回答

相關問題