离子局部存储角度
Ionic LocalStorage Angular
本文关键字：局部存储 更新时间：2023-09-26
我正在开发一个名为"工作狂"的应用程序，该应用程序具有待办事项列表。所以我遇到的问题是我不知道应该如何添加本地存储。如果您能告诉我应该在哪里添加本地存储以及如何添加，那就太棒了。我在 Ionic 页面上通读了 localStorage 的文档，但我不知道怎么做。这是代码！
索引.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>
应用.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();
}
});
})
注入ngStorage模块
var app = angular.module('starter', ['ionic','ngStorage'])
在控制器中注入$localStorage
app.controller('TodoCtrl', function($scope, $ionicPopup, $ionicListDelegate, $state,$localStorage) ...
Github链接-文档
演示示例-参考文档
这是我的本地存储工厂
.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']);
}])
相关文章：
- 将作用域存储在JSON中
- 使用javascript存储变量的最安全方式
- 当图像转换为本地存储的DataURL时，EXIF被删除
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- 如何有效地将游戏数据存储在URL查询字符串中
- Ember.js-接口状态应该存储在哪里
- 如何解雇“;铁局部存储负载”;事件
- 本地存储中的字符串到字节数组转换
- 从jQuery调用存储在Variable中的函数
- 推荐在JavaScript中执行存储为字符串的函数，而不是使用eval
- 通过另一个php应用程序将我的项目推送到Github存储库中
- 将数据存储在javascript数组中以供进一步使用
- 在页面卸载时写入HTML5 FileSystem API存储
- 加载存储在IndexedDB中的HTML页面
- 在字符串中查找所有图像 src URL 并存储在数组中
- 离子局部存储角度
- 如何将 jQuery.post 数据存储到局部变量，以便我可以使用它
- 存储局部变量，然后重新运行函数
- 我如何存储当前的头部颜色到一个局部变量时，单击
- 关于jquery编写插件时存储局部变量
