javascript 使用 Ionic 的本地存储
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31924477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Local storage using Ionic
提问by Jacob Brauchler
I am trying to hook my app up to local storage so that I can have the data saved on the users device and not being reset each time the app is closed. My only issue is I can't figure out to actually link local storages to my array of objects. Any help is greatly appreciated. I have added any code that I believe is relevant.
我正在尝试将我的应用程序连接到本地存储，以便我可以将数据保存在用户设备上，而不会在每次应用程序关闭时重置。我唯一的问题是我无法弄清楚将本地存储实际链接到我的对象数组。任何帮助是极大的赞赏。我已经添加了我认为相关的任何代码。
app.js
应用程序.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('gas-mileage-tracker', ['ionic', 'ionic.utils', 'gas-mileage-tracker.controllers', 'gas-mileage-tracker.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.run(function($localstorage) {
var mileages = [];
$localstorage["mileages"] = JSON.stringify(mileages);
$localstorage.set('name', 'mileages');
console.log($localstorage.get('name'));
$localstorage.setObject('post', mileages=[{
id: 0,
mpg: 20,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Shell"
}]);
var post = $localstorage.getObject('post');
console.log(post);
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.calculations', {
url: '/calculations',
views: {
'tab-calculations': {
templateUrl: 'templates/tab-calculations.html',
controller: 'CalculationsCtrl'
}
}
})
.state('tab.mileages', {
url: '/mileages',
views: {
'tab-mileages': {
templateUrl: 'templates/tab-mileages.html',
controller: 'MileagesCtrl'
}
}
})
.state('tab.mileage-details', {
url: '/mileages/:mileageId',
views: {
'tab-mileages': {
templateUrl: 'templates/mileage-details.html',
controller: 'MileageDetailsCtrl'
}
}
})
.state('tab.gas_stations', {
url: '/gas_stations',
views: {
'tab-gas_stations': {
templateUrl: 'templates/tab-gas_stations.html',
controller: 'GasStationsCtrl'
}
}
})
.state('tab.cars', {
url: '/cars',
views: {
'tab-cars': {
templateUrl: 'templates/tab-cars.html',
controller: 'CarsCtrl'
}
}
})
$urlRouterProvider.otherwise('/tab/mileages');
});
controllers.js
控制器.js
angular.module('gas-mileage-tracker.controllers', [])
.controller('CalculationsCtrl', function($scope, Mileages) {
$scope.add = function(mileage) {
Mileages.add(mileage);
}
})
.controller('MileagesCtrl', function($scope, Mileages) {
$scope.mileages = Mileages.all();
$scope.remove = function(mileage) {
Mileages.remove(mileage);
};
$scope.add = function(mileage) {
Mileages.add(mileage);
};
})
.controller('MileageDetailsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileage = Mileages.get($stateParams.mileageId);
})
.controller('GasStationsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileages = Mileages.all();
$scope.mileage = Mileages.get($stateParams.mileageId);
})
.controller('CarsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileages = Mileages.all();
$scope.mileage = Mileages.get($stateParams.mileageId);
})
services.js
服务.js
angular.module('gas-mileage-tracker.services', [])
.factory('Mileages', function() {
var mileages = [{
id: 0,
mpg: 20,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Shell"
}, {
id: 1,
mpg: 16,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Loaf N' Jug"
}, {
id: 2,
mpg: 18,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Conoco"
}, {
id: 3,
mpg: 17,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Bradley"
}, {
id: 4,
mpg: 18,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Texaco"
}];
return {
all: function() {
return mileages;
},
remove: function(mileage) {
mileages.splice(mileages.indexOf(mileage), 1);
},
add: function(mileage) {
mileage.id = mileages.length;
mileage.mpg = mileage.miles_driven/mileage.gallons_added
mileages.push({
editMode: false,
id: mileage.id,
mpg: mileage.mpg,
car: mileage.car,
gas_station: mileage.gas_station
});
console.log(mileage); // Log the original mileage
console.log(mileages[mileage.id]); // Log the added mileage
mileage.mpg= '';
mileage.miles_driven= '';
mileage.gallons_added= '';
mileage.car= '';
mileage.gas_station= '';
},
edit: function(mpg) {
mileage.editMode = true;
mileages.mpg = mileage.mpg
console.log(mileage);
},
save: function(mpg) {
mileage.editMode = false;
},
get: function(mileageId) {
for (var i = 0; i < mileages.length; i++) {
if (mileages[i].id === parseInt(mileageId)) {
return mileages[i];
}
}
return null;
}
};
});
utils.js
实用程序.js
angular.module('ionic.utils', [])
.factory('$localstorage', ['$window', function($window) {
return {
set: function(key, value) {
$window.localStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
setObject: function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function(key) {
return JSON.parse($window.localStorage[key] || '{}');
}
}
}]);
回答by NHTorres
Use this service to manage, create, retrieve, or delete LocalStorage variables in each of its controllers. I hope it will help.
使用此服务来管理、创建、检索或删除其每个控制器中的 LocalStorage 变量。我希望它会有所帮助。
.factory('sessionService',['$http',function($http){
return {
set:function(key,value){
return localStorage.setItem(key,JSON.stringify(value));
},
get:function(key){
return JSON.parse(localStorage.getItem(key));
},
destroy:function(key){
return localStorage.removeItem(key);
},
};
}])
回答by Lukas
Just to make sure to make more users aware of the fact, that the localstorage doesn't necessarily have to be persistent (on iOS), please take a look at:
只是为了确保让更多用户意识到 localstorage 不一定必须是持久的（在 iOS 上），请查看：
How permanent is local storage on Android and iOS?
Therefore I would recommend to use the nativestorage in your wrapper instead:
因此，我建议在您的包装器中使用 nativestorage：
https://github.com/TheCocoaProject/cordova-plugin-nativestorage
https://github.com/TheCocoaProject/cordova-plugin-nativestorage
