AngularJS待办事项列表应用程序-在页面刷新时保持列表[重复]
Posted
技术标签:
【中文标题】AngularJS待办事项列表应用程序-在页面刷新时保持列表[重复]【英文标题】：AngularJS To-Do List App - Keep list on page refresh [duplicate] 【发布时间】：2019-01-12 15:21:05 【问题描述】：我正在使用 AngularJS 制作一个简单的待办事项列表应用程序。我实际上使用的是 ASP.NET MVC 模板，但到目前为止，我已经设法通过使用 Angular 和 Bootstrap 来让一切正常工作。
我可以添加和删除任务，并将它们标记为完成。但是，当我刷新页面时，它会重置待办事项列表。刷新页面或导航到网站上的另一个页面时，我需要它来保存列表。该列表应仅在用户关闭浏览器后重置。
我尝试了各种方法，包括 $cookies、$sessionStorage 和 $localStorage，但由于某种原因，我无法让它们中的任何一个工作。在这个阶段，我应该依赖前端进行会话管理还是后端？
下面是我尝试实现 $localStorage 时的代码示例。我错过了什么吗？
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-controller="todoList" class="jumbotron">
<h2><strong>To-Do List</strong></h2>
<br/>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText"
placeholder="Add new task" size="30">
<button type="submit" class="btn btn-primary glyphicon glyphicon-plus">Add</button>
</form>
<br/>
<ul>
<li ng-repeat="todo in todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-todo.done">todo.text</span>
<span class="glyphicon glyphicon-trash" ng-click="removeTodo()"></span>
</label>
</li>
</ul>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller('todoList', function ($scope, $localStorage)
$scope.getTodos = function()
var str = $localStorage.getItem("todos");
$scope.todos = JSON.parse(str);
if (!todos)
$scope.todos = [ text: 'Feed the cat', done: true , text: 'Mow the lawn', done: false ];
$scope.saveToDos = function()
var str = JSON.stringify(todos);
$localStorage.SetItem("todos", str);
$scope.addTodo = function ()
if($scope.todoText !== '')
$scope.todos.push(text:$scope.todoText, done:false);
$scope.todoText = '';
saveToDos();
;
$scope.removeToDo = function()
todos.splice($index, 1);
saveToDos();
);
</script>
</body>
</html>【问题讨论】：
尝试使用 setItem()（小写 s） $localStorage 不是核心 AngularJS 服务。显示该服务的代码。 这段代码sn-p有很多错误。它以找不到$localStorageProvider 开头。然后todos 未定义。然后SetItem 没有这样的属性。名单还在继续。这段代码 sn -p 对读者没什么用处。
【参考方案1】：
$localStorage 不是 Angular 服务，它是一个内置的浏览器功能。
你应该这样使用它：
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
【讨论】：
【参考方案2】：todolist 保存 todo 的 $scope 会在导航到不同的路线时被销毁。 简单的解决方案是使用 $rootScope 来保存所有待办事项 - 这将在导航到应用程序上的不同路线时保留待办事项的数据。
您仍然可以在 onbeforeunload 事件中使用 localsotrage 并清除 localstorage。
Reference
【讨论】：
以上是关于AngularJS待办事项列表应用程序-在页面刷新时保持列表[重复]的主要内容，如果未能解决你的问题，请参考以下文章