Question

我是IonicFrameWork的新手，并且正在关注他们的“入门标签”模板，并对工厂的“删除”和“书签”项目进行了一些修改。

包含工厂的, path: "../local-repo-directory"如下所示：

books.js

我的.factory('Books', function() { // books data var books = [{ id: 0, title: 'Sample Title', author: 'Sample Author', category: 'Horor, Fiction', cover: '/cover.jpeg', details: 'some details about the book', chapters: [ { id : 1, name: 'Chapter 1', filename: 'chapter1.html', }, { id : 2, name: 'Chapter 2', filename: 'Chapter2.html', } ] } ..... return { all: function() { return books; }, // remove a book from the list remove: function(book) { books.splice(books.indexOf(book), 1); },看起来像这样：

controllers.js

当我退出应用并再次打开它时，已删除的项目又回来了，最喜欢的项目消失了。

在搜索解决方案时，我遇到了this article，其中指出我应该使用.... .controller('DashCtrl', function($scope, Books) { $scope.books = Books.all(); $scope.remove = function(book) { Books.remove(book); }; }) .controller('singlebookCtrl', function($scope, $stateParams, Books){ $scope.book = Books.get($stateParams.bookId); $scope.toggleIcon = function ($evemt, iconName, book){ var buttonClasses = $event.currentTarget.className; // add the book to favorite if (....){ book.isFavorite = true; } // remove the book from favorite else { book.isFavorite = false; } ....。但不知道我应该如何将这种方法应用于工厂。

Answer 1

我个人更喜欢使用ngStorage，这样可以非常简单直接地使用localStorage & sessionStorage。

例如，在控制器中注入依赖项之后，您可以：

设置变量：

$scope.favList = [1, 4, ...]
$scope.jsonList = { ... }
$localStorage.favLists = $scope.favList;
$localStorage.jsonList = $scope.jsonList;

访问变量，只需访问localStorage值：

var favList = $localStorage.favLists;

Answer 2

对于所有意图和目的，您可以将本地存储视为键/值存储，就像javascript对象一样。因此，如果您想在本地存储中保存值，请按以下步骤操作。

window.localStorage["bookOne"] = "STRING HERE"

或者如果你想保存一个javascript对象：

window.localStorage["bookOne"] = JSON.stringify({a:b})

它应该在页面重新加载之间持续存在。

Answer 3

这里的真正问题是，在您的代码中，您使用books在每次加载时设置var books = ...。每次重新加载应用程序时，它都将重新应用books，收藏夹将丢失。除了将其保存到window.localStorage之外，您还必须从本地存储中读取并在应用加载时将其分配给books和favourites变量，以便查看之前的更改制成。

Answer 4

您可以使用angular-local-storage模块完成此操作，这里有一些基于您的问题的示例。

angular.module('app', ['LocalStorageModule'])
  .factory('Books', function(localStorageService) {
    // favorites list(books id)
    var favList = [1, 2, 3, ...];
    // ....
    return {
      remove: function(id) {
        favList.splice(favList.indexOf(id), 1);
        // sync with localStorage
        localStorageService.set(favorites, favList);
      },
      // ....
    }
  });

注意您可以简单地使用angular-local-storage#bind并将特定范围键绑定到此服务，该服务会自动为您执行此同步。例如：

// Inside your controller
$scope.favList = [1, 4, ...]
// returns a deregistration function for this listener.
$scope.unbind = localStorageService.bind($scope, 'favList');

AngularJS本地存储工厂

4 个答案: