我正在开发一款名为＆＃34; Workaholic＆＃34;这个应用程序具有待办事项列表。
所以我遇到的问题是我不知道我应该如何添加localStorage。如果你能告诉我应该在哪里添加localStorage以及如何添加，那将是非常棒的。我在Ionic页面上阅读了localStorage的文档，但我不知道如何。这是守则！
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="TodoCtrl">
<ion-header-bar align-title="center" class="bar-balanced">
<h1 class="title">Workaholic</h1>
<a class="button button-icon icon ion-android-home" href="#/home"></a>
<a class="button button-icon ion-compose icon" href="#/newtask"></a>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<!-- todolist page -->
<script id="templates/todo.html" type="text/ng-template">
<ion-view view-title="todo">
<ion-content>
<ion-list ng-init="todoList()">
<ion-item ng-repeat="task in tasks" on-hold="edit(task)" on-double-tap="tasks.splice($index, 1)">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<!-- Page to add a Task in Todo -->
<script id="templates/newtask.html" type="text/ng-template">
<ion-view view-title="TaskAdd">
<ion-content class="padding">
<div class="tasktitle">
<label class="item item-input">
<input type="text" placeholder="Add a Task Title" ng-model="todo.title">
</label>
</div>
<div class="taskdesc">
<label class="item item-input">
<input type="text" placeholder="Add a Description to the Task" ng-model="todo.desc">
</label>
</div>
<button ng-click="saveTask(todo)" class="button button-block button-positive"> Save </button>
</ion-content>
</ion-view>
</script>
<!-- countdown page -->
<script id="templates/countdown.html" type="text/ng-template">
<ion-view view-title="countdown">
<ion-content ng-controller="CountCtrl">
<div class="countdown" ng-show="countDown>0"><span ng-if="minutes < 10">0</span>{{minutes}}:<span ng-if="seconds < 10">0</span>{{seconds}}</div>
<div class="row">
<div class="spacer">
</div>
<div class="firstInp">
<label class="item item-input">
<input class="firstInp" id="input1" name="myform" ng-model="mininputVal" type="tel" placeholder="Min.">
</label>
</div>
<div class="secondInp">
<label class="item item-input">
<input class="secondInp" id="input2" name="myform" ng-model="secinputVal" type="tel" placeholder="Sec.">
</label>
</div>
</div>
<div class="countButton1">
<button id="countDownbutton" ng-disabled="countDown > 0 || !secinputVal" class="button button-balanced" ng-click="timerCountdown(mininputVal, secinputVal)">Start Countdown</button>
</div>
<div class="countButton2">
<button id="countDownbutton" ng-disabled="!countDown" class="button button-assertive" ng-click="stopCount()">Stop Countdown</button>
</div>
</ion-content>
</ion-view>
</script>
<!-- Home Site -->
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content class="padding">
<h4>Hello User! Thank you for testing my App. <br />
Its not Finished at all, so if you have <br />
improvements or Ideas, just tell me them. <br />
<br />
</h4>
<h4>
Contact me: <br />
via Twitter - @JulianTheDev <br />
via Email - julianbe00@gmail.com <br />
</h4>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/todo">To Do's</a>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/countdown">Countdown</a>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/help">Help</a>
</ion-content>
</ion-view>
</script>
<!-- How It Works Site -->
<script id="templates/help.html" type="text/ng-template">
<ion-view view-title="help">
<ion-content>
<div class="todohelp">
<h3>To Do</h3>
<h4>• Double Tap to delete a Task!</h4>
<h4>• Hold on the Task to edit it!</h4>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
app.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'
var app = angular.module('starter', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
.state('help', {
url: '/help',
templateUrl: 'templates/help.html'
})
.state('countdown', {
url: '/countdown',
templateUrl: 'templates/countdown.html'
})
.state('newtask', {
url: '/newtask',
templateUrl: 'templates/newtask.html'
})
.state('todo', {
url: '/todo',
templateUrl: 'templates/todo.html'
});
$urlRouterProvider.otherwise("home");
});
app.controller('TodoCtrl', function($scope, $ionicPopup, $ionicListDelegate, $state) {
// Tasks are stored here
$scope.tasks =
[
{title: "Double Tap To Delete a Task!", description: "Its Just an Example!"},
{title: "Hold On The Task to Edit It!", description: "Its Just an Example! You can delete this."},
];
window.localStorage['todos'] = JSON.stringify($scope.tasks);
var todos = JSON.parse(window.localStorage['todos'] || '{}');
$scope.saveTask = function(todo){
console.log(todo.title, todo.desc);
$state.go('todo');
$scope.tasks.push({title: todo.title});;
};
// Edits a Task
$scope.edit = function(task) {
$scope.data = { response: task.title };
$ionicPopup.prompt({
title: "Edit Task",
scope: $scope
}).then(function(res) { // promise
if (res !== undefined) task.title = $scope.data.response;
$ionicListDelegate.closeOptionButtons();
})
};
})
// Countdown Controller
app.controller('CountCtrl', function countController($scope, $interval, $ionicPopup){
$scope.countDown = 0; // number of seconds remaining
var stop;
$scope.mininputVal = "";
$scope.secinputVal = "";
$scope.minutes = $scope.mininputVal*60;
$scope.seconds = $scope.secinputVal;
// Countdown
$scope.timerCountdown = function(minutes, seconds) {
$scope.buttonclick = document.getElementById('countDownbutton')
$scope.minutes = parseInt(minutes);
$scope.seconds = parseInt(seconds);
// Minutes/Seconds Flow + if above the limit
if ($scope.mininputVal > 99){
$scope.minutes = 99
}
if ($scope.secinputVal > 60){
$scope.seconds = 60
}
if (!$scope.mininputVal){
$scope.minutes = 0;
}
if (!$scope.secinputVal){
$scope.seconds = 0;
}
// set number of seconds until the countdown is ready
$scope.countDown = parseInt($scope.mininputVal*60) + parseInt($scope.secinputVal);
// start the countdown
stop = $interval(function() {
// decrement remaining seconds
$scope.seconds--;
$scope.countDown--;
if ($scope.seconds === -1){
$scope.seconds = 59;
$scope.minutes--;
}
// Stop The Countdown
$scope.stopCount = function () {
//Set the Timer stop message.
console.log("Timer Stopped.")
//Cancel the Timer.
if (angular.isDefined(stop)) {
$interval.cancel(stop);
$scope.countDown = 0;
}
};
// if zero, stop $interval and show the popup
if ($scope.countDown === 0){
$interval.cancel(stop);
$scope.running = false;
console.log("Finished");
var alertPopup = $ionicPopup.alert({
title: 'The Countdown is Finished!',
template: 'Youre Ready To Go!'});
}
},1000,0); // invoke every 1 second
};
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
答案 0 :(得分：1)
这是我的Localstorage工厂
.factory('Ls', ['$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] || '{}');
},
ClearLsValues: function (arrKeys) {
for (var i = 0; i < arrKeys.length; i++) {
localStorage.removeItem(arrKeys[i]);
}
}
};
}])
您可以像这样使用它
.controller('YourCtrl', ['Ls', function(Ls){
//Sets a single value
Ls.Set('name', true);
//returns the previous set value
var value = Ls.Get('name');
//sets an object
Ls.SetObject('name2', {key:'value'});
//returns the previous set Object
var value2 = Ls.GetObject('name2');
//Clears all values in the Array
Ls.ClearLsValues(['name', 'name2']);
}])
答案 1 :(得分：1)
注入ngStorage模块
var app = angular.module('starter', ['ionic','ngStorage'])
在控制器注入$localStorage
app.controller('TodoCtrl', function($scope, $ionicPopup, $ionicListDelegate, $state,$localStorage) ...