Question

我正在处理待办事项列表应用，并希望将数据保存在设备的本地存储中，但我无法弄清楚我需要做什么。

在我的app.js文件中，我有以下代码，可以添加新任务并进行编辑：

.controller('DashCtrl', function($scope, $ionicPopup, $ionicListDelegate) {
    $scope.tasks = 
        [
            {title:"Example 1", completed: true},
            {title:"Example 2", completed: false},

        ];

    $scope.newTask = function(){
        $ionicPopup.prompt({
            title:"New Task",
            template: "Enter task:",
            inputPlaceholder:"Please add your task",
            okText:'Create task'
        }).then(function(res){
            if (res) $scope.tasks.push({title: res, completed: false});
        })
    };

     $scope.edit = function(task){
        $scope.data = { response: task.title};
        $ionicPopup.prompt({
            title: "Edit Task",
            scope: $scope
        }).then(function(res){
            if(res !== undefined) task.title = $scope.data.response;
            $ionicListDelegate.closeOptionButtons()
        })
    };

数据存储在范围内，因此我尝试了以下操作：

    localStorage.setItem(scope));

我的想法是每次添加新任务时调用此函数，以便存储始终是最新的。但这似乎没有用，我做错了什么？

Answer 1

这是要走的路：

https://github.com/gsklee/ngStorage

“一个AngularJS模块，它使Web存储以Angular方式工作。包含两个服务：$ localStorage和$ sessionStorage。”

Answer 2

localStorage存储字符串。如果你的数据已经是一个字符串，那就简单了 localStorage.setItem($scope.data)应该有效。如果它是有效的JSON，则将其字符串化并像以前一样存储。

localStorage.setItem(JSON.stringify($scope.data))

Answer 3

@Ladmerc这会有用吗？

$scope.newTask = function(){
        $ionicPopup.prompt({
            title:"New Task",
            template: "Enter task:",
            inputPlaceholder:"Please add your task",
            okText:'Create task'

        }).then(function(res){
            if (res) $scope.tasks.push({title: res, completed: false});
            localStorage.setItem(JSON.stringify($scope.data));
            localStorage.setItem($scope.data);
        })
    };

Answer 4

我认为您的方法存在多个问题，首先是您要保存整个$scope对象，您可以放置console.log()以查看其中包含的数据量，扰流警报，很多。 $scope对象可能很大，无需保存，您想要的是保存任务。正如其他人所提到的，您还需要对数据进行字符串化，因为localStorage只接受字符串。幸运的是，你不必自己解决这些问题，我强烈建议你看看localForage，它是一个图书馆：

localForage是一个快速而简单的JavaScript存储库。 localForage通过使用改进了Web应用程序的离线体验异步存储（IndexedDB或WebSQL）简单，类似localStorage的API。

您可以在documentation中找到有关localForage的更多信息，并且还有一个Angular wrapper。

在您的情况下，这将是如何使用此库的示例：

$localForage.setItem('tasks', $scope.data).then(function() {
  console.log("The tasks have been saved!");
});

如何在AngularJS中使用localStorage保存我的数据？

4 个答案: