从本地存储中一一检索数组列表
Posted
技术标签:
【中文标题】从本地存储中一一检索数组列表【英文标题】：Retrieving array list one by one from local storage 【发布时间】：2016-08-18 18:46:56 【问题描述】：我正在创建一个示例 todo 应用程序，我可以在其中添加/删除任务，但是当我刷新页面时，数据会丢失。所以我决定使用localStorage来保存任务列表，并在页面刷新时取回。
我也可以这样做，但我只能以数组列表的形式检索数据。如何将存储在我的localStorage 中的任务一一列出，并完全按照页面加载前的状态显示？
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"));
【参考方案1】：
由于您只能将string 存储在local storage 中，而您是通过JSON.stringify() 完成的，因此您需要通过JSON.parse(text[, reviver]) 撤消它，然后对其进行迭代。
【讨论】：
【参考方案2】：RetrievedData 是一个数组，您必须对其进行迭代并将每个项目推送到 tasks 对象。您现在正在做的是将整个数组转储到一个任务中。
if($scope.retrievedData != null)
$scope.retrievedData.forEach(function(item)
$scope.tasks.push(item);
)
【讨论】：
以上是关于从本地存储中一一检索数组列表的主要内容，如果未能解决你的问题，请参考以下文章