Javascript AngularJS待办事项列表应用程序-保持页面刷新列表

我正在使用AngularJS制作一个简单的待办事项列表应用程序。实际上，我使用的是ASP.NETMVC模板，但到目前为止，我仅通过使用Angular和Bootstrap就可以使所有内容正常工作

我可以添加和删除任务，并将它们标记为已完成。但是，当我刷新页面时，它会重置待办事项列表。当刷新页面或导航到站点上的其他页面时，我需要它来保存列表。只有在用户关闭浏览器后，列表才会重置

我尝试过各种方法，包括$cookies、$sessionStorage和$localStorage，但由于某些原因，我无法让它们中的任何一种正常工作。在这个阶段，我应该依赖前端进行会话管理，还是依赖后端

下面是我尝试实现$localStorage时的代码示例。我错过什么了吗

待办事项列表


添加




{{todo.text}


var app=angular.module（'todoApp'，[]）；
app.controller（'todoList'，函数（$scope，$localStorage）{
$scope.getTodos=函数（）{
var str=$localStorage.getItem（“todos”）；
$scope.todos=JSON.parse（str）；
如果（！todos）{
$scope.todos=[{text:'喂猫'，done:true}，{text:'割草'，done:false}]；
}
}
$scope.saveToDos=function（）{
var str=JSON.stringify（todos）；
$localStorage.SetItem（“todos”，str）；
}     
$scope.addTodo=函数（）{
如果（$scope.todoText！=''）{
$scope.todos.push（{text:$scope.todoText，done:false}）；
$scope.todoText=''；
saveToDos（）；
}
};
$scope.removeToDo=函数（）{
todos.拼接（$index，1）；
saveToDos（）；
}
});

todolist的$scope（保存todo的位置）在导航到其他路线时被销毁。 简单的解决方案是使用$rootScope保存所有todo—这将在应用程序上导航到不同路线时保留todo的数据

您仍然可以在

onbeforeunload

事件中使用localsotrage并清除localstorage。

---

$localStorage不是角度服务，而是内置的浏览器功能

您应该这样使用它：

var jsonObject = {key: 'value'};
window.localStorage.setItem("varName", JSON.stringify(jsonObject)); // this will save "varName" in the local storage with jsonObject as value
jsonObject = JSON.parse(window.localStorage.getItem("varName")); // this will read "varName" from localStorage to jsonObject

---

尝试使用setItem（）（小写s）$localStorage不是核心AngularJS服务。显示该服务的代码。此代码段有太多错误。它以找不到

$localStorageProvider

开头。然后

todos

未定义。然后

SetItem

没有这样的属性。这个名单还有很多。此代码段对读者没有用处。