AngularJS 本地存储 - 初始化应用程序检索本地存储的数据答案

【问题标题】：AngularJS local storage - initialize app retrieving local-stored dataAngularJS 本地存储 - 初始化应用程序检索本地存储的数据
【发布时间】：2014-09-11 00:12:24
【问题描述】：

我是 Angular 的新手，我试图避免在用户刷新页面时丢失添加到简单购物车应用程序中的项目。

我正在使用 angularLocalStorage (https://github.com/agrublev/angularLocalStorage) 但不知道如何将其取回内容。我的台词：

var myApp = angular.module('ionicApp', ['ionic','angularLocalStorage']);
myApp.factory('prodottiData', function($http) {
  return {
    getFooOldSchool: function(callback) {
    $http.get('http://192.168.1.128/hongkongapp/?json=get_recent_posts&post_type=product&custom_fields=all').success(callback);
    }
  }
 });
myApp.factory('DataService', function() {
  var myCart = new shoppingCart("AngularStore");
  return {
    cart : myCart
  };
});
myApp.controller('MyController', function MyController ($scope, storage, $ionicSideMenuDelegate, prodottiData, DataService, $sce) {
    $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.$getByHandle('mainMenu').toggleLeft();
  };
  $scope.toggleMySecondMenuLeft = function() {
    $ionicSideMenuDelegate.$getByHandle('mySecondMenu').toggleLeft();
  };
    //adding menu data to the scope object
    prodottiData.getFooOldSchool(function(data) {
        $scope.menu = data;
    });
    //adding the cart to the scope object
    $scope.cart = DataService.cart;
    $scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }
    images = $scope.menu;
    $scope.showloader = function(){            
            $scope.shownImage = this.post.thumbnail_images.full.url;
            $scope.itemDesc = this.post.content;
            $scope.itemPrice = this.post.custom_fields._price[0];
            $scope.productName = this.post.title;
            $scope.skuProdotto = this.post.id;
        }
    });

现在，如果我检查控制台上的本地存储，我可以看到确实存储了一些东西，但我错过了在启动时重新填充购物车的方法。

任何帮助都会很棒！

【问题讨论】：

标签： angularjs local-storage ionic-framework

【解决方案1】：

为什么不直接使用浏览器本地存储？您可以将其作为新服务添加到您的 services.js 中并使用它。

var storeService = myAppServices.factory('storeService', function() {

    var service =
    {
        setClientData:function(client_details)
        {
            window.localStorage.setItem( "client_data", JSON.stringify(client_details) );
            client_data = client_details;
        },
        getClientData:function()
        {
            if (client_data == null)
            {
                client_data = JSON.parse(window.localStorage.getItem("client_data"));
            }
            return client_data;
        }
    }

    var client_data = null;

    return service;
});

【讨论】：

【解决方案2】：

从文档中检索，它是storage.get('key')

所以，刷新后检查：

if (storage.get('someKey')){
  $scope.retrieved_value = storage.get('someKey');
}else{
// whatever
}

【讨论】：

【解决方案3】：

您可以使用 localStorage 代替 windows.localStorage。

 if(typeof(Storage)!=="undefined")
        {
            // Code for localStorage/sessionStorage.
            var hello = "Hello World!!";

            localStorage.setItem("hello",hello);
            // get string
            console.log(localStorage.getItem("hello")); // will return 'Hello World!!'


            var me = {name:'abel',age:26,gender:'male'};
            localStorage.setItem("user", JSON.stringify(me));
            //fetch object
            console.log(localStorage.getItem("user")); // will return {"name":"myname","age":99,"gender":"myGender"}
            var objetos = JSON.parse(localStorage.getItem("user"));
            console.log(objetos.name);

        }
        else
        {
            // Sorry! No Web Storage support..
        }

【讨论】：