0
タスクを追加/削除できるサンプルのToDoアプリケーションを作成していますが、ページを更新するとデータが失われます。だから、私はlocalStorageを使って、タスクリストを保存し、ページが更新されたときにそれを取得することに決めました。ローカルストレージからアレイリストを1つずつ取り出す
私は同じことができますが、データは配列リストとしてのみ取得できます。どうすれば私のlocalStorageに格納されているタスクを1つずつリスト表示し、ページロード前と同じように表示できますか？
HTMLコード
<body ng-app="todoApp">
<div ng-controller="addTaskController" data-ng-init="init()">
<div class="container">
<h3>ToDo Application</h3>
<div class="form-group col-md-6">
<form ng-submit="addTask()" class="form-inline">
<input type="text" placeholder="Enter Your Task" ng-model="newTask" class="form-control">
<button type="submit" class="btn btn-primary">Add Task</button>
<div class="taskList">
<ol>
<li ng-repeat="task in tasks track by $index">{{task}} <i style="color:red;margin-left:10px;cursor:pointer;" class="fa fa-times" aria-hidden="true" ng-click="deleteTask()" data-toggle="tooltip" title="Delete Task"></i></li>
<p ng-show="tasks.length==0">No Tasks Available </p>
</ol>
</div>
</form>
</div>
</body>
JSコード
var todoApp = angular.module('todoApp',[]);
todoApp.controller('addTaskController',function($scope){
$scope.tasks = [];
$scope.addTask = function() { // Function to add a task to list
if($scope.newTask == null) {
alert("Please enter a task");
} else {
$scope.tasks.push($scope.newTask);
localStorage.setItem("storedTasks", JSON.stringify($scope.tasks));
$scope.newTask = null;
}; // add() ends
}
$scope.deleteTask = function() {
$scope.tasks.splice(this.$index, 1);
localStorage.removeItem("storedTasks");
};
$scope.init = function() {
$scope.retrievedData = localStorage.getItem("storedTasks");
if($scope.retrievedData != null) {
$scope.tasks.push($scope.retrievedData);
} else {
tasks.length==0;
}
}
});
前ページのリロード
ページのリロード後
どのように私はこの
逆もまた同じです： '$ scope.tasks = angular.fromJson（localStorage.getItem（" storedTasks "））;' – devqon