Javascript 离子局部存储
Javascript 离子局部存储,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我正在开发一个名为“工作狂”的应用程序，这个应用程序有一个待办事项列表 所以我的问题是我不知道如何添加本地存储。如果你能告诉我应该在哪里添加本地存储以及如何添加，那就太棒了。我在Ionic页面上阅读了localStorage的文档，但我不知道如何阅读。这是密码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpo
我正在开发一个名为“工作狂”的应用程序，这个应用程序有一个待办事项列表
所以我的问题是我不知道如何添加本地存储。如果你能告诉我应该在哪里添加本地存储以及如何添加，那就太棒了。我在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>
工作狂
{{task.title}}
拯救
0{{分钟}：0{{秒}
开始倒计时
停止倒计时
用户好！感谢您测试我的应用程序
它还没有完成，所以如果您有
改进或想法，请告诉我
联系我：
通过Twitter-@juliantev
通过电子邮件-julianbe00@gmail.com
做
•双击可删除任务！
•按住任务进行编辑！
// 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();
}
});
})
//Ionic Starter应用程序
//angular.module是创建、注册和检索angular模块的全局位置
//“starter”是此角度模块示例的名称（也在index.html中的属性中设置）
//第二个参数是“requires”的数组
var app=angular.module（'starter'，['ionic']））
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:'templates/home.html'
})
.state（'帮助'{
url:“/help”，
templateUrl:'templates/help.html'
})
.state（“倒计时”{
url:“/倒计时”，
templateUrl:'templates/countdown.html'
})
.state（'newtask'{
url:“/newtask”，
templateUrl:'templates/newtask.html'
})
.州（‘待办事项’{
url:“/todo”，
templateUrl:'templates/todo.html'
});
$urlRouterProvider。否则（“主页”）；
});
app.controller（'TodoCtrl'，函数（$scope、$ionicPopup、$ionicListDelegate、$state）{
//任务存储在这里
$scope.tasks=
[
{title:“双击可删除任务！”，description:“这只是一个示例！”}，
{title:“等待任务以编辑它！”，description:“这只是一个示例！您可以删除它。”}，
];
window.localStorage['todos']=JSON.stringify（$scope.tasks）；
var todos=JSON.parse（window.localStorage['todos']| |'{}'）；
$scope.saveTask=函数（todo）{
日志（todo.title，todo.desc）；
$state.go（'todo'）；
$scope.tasks.push（{title:todo.title}）；；
};
//编辑任务
$scope.edit=功能（任务）{
$scope.data={响应：task.title}；
$ionicPopup.prompt({
标题：“编辑任务”，
范围：$scope
}).then（函数（res）{//promise
if（res！==未定义）task.title=$scope.data.response；
$ionicListDelegate.closeOptionButtons（）；
})
};
})
//倒计时控制器
app.controller（'CountCtrl'，函数countController（$scope，$interval，$ionicPopup）{
$scope.countDown=0；//剩余秒数
var停止；
$scope.mininputVal=“”；
$scope.secinputVal=“”；
$scope.minutes=$scope.mininputVal*60；
$scope.seconds=$scope.secinputVal；
//倒计时
$scope.timerCountdown=函数（分钟，秒）{
$scope.buttonclick=document.getElementById（'countDownbutton'）
$scope.minutes=parseInt（分钟）；
$scope.seconds=parseInt（秒）；
//分钟/秒流量+如果超过限制
如果（$scope.mininputVal>99）{
$scope.minutes=99
}
如果（$scope.secinputVal>60）{
$scope.seconds=60
}
if（！$scope.mininputVal）{
$scope.minutes=0；
}
if（！$scope.secinputVal）{
$scope.seconds=0；
}
//设置倒计时准备就绪前的秒数
$scope.countDown=parseInt（$scope.mininputVal*60）+parseInt（$scope.secinputVal）；
//开始倒计时
stop=$interval（函数（）{
//递减剩余秒数
$scope.seconds--；
$scope.countDown--；
如果（$scope.seconds===-1）{
$scope.seconds=59；
$scope.minutes--；
}
//停止倒计时
$scope.stopCount=函数（）{
//设置计时器停止消息。
log（“计时器已停止”）
.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']);
}])
var app = angular.module('starter', ['ionic','ngStorage'])
app.controller('TodoCtrl', function($scope, $ionicPopup, $ionicListDelegate, $state,$localStorage) ...