Installation
Follow the instructions on this link
LocalForage
<html>
<head>
<script type="text/javascript" src="localforage.js"></script>
</head>
<body>
</body>
</html>
|
1 2 3 4 5 6 7 |
<html> <head> <script type="text/javascript" src="localforage.js"></script> </head> <body> </body> </html> |
From now on , we can begin to use the keyword localforage from code or console developers.
Configuration
localforage.config({
driver : localforage.WEBSQL,//db driver
name : ‘myApp‘, //db name
version : 1.0,
size : 4980736, //db size
storeName : ‘keyvaluepairs‘
});
|
1 2 3 4 5 6 7 |
localforage.config({ driver : localforage.WEBSQL,//db driver name : ‘myApp‘, //db name version : 1.0, size : 4980736, //db size storeName : ‘keyvaluepairs‘ }); |
Localforage drivers are supported by :
localforage.INDEXEDDB localforage.WEBSQL localforage.LOCALSTORAGE Examples
localforage.setItem ( ‘ key1 ‘ ‘ value1 ‘, function (err , value) {
// do other things after the value was saved .
console.log (value);
} ) ;
// get
localforage.getItem ( ‘ key1 ‘ ) . Then (function ( value) {
// Using promises of SS6
console.log (value);
} ) ;
// remove
localforage.removeItem ( ‘ key1 ‘, function (err ) {
console.log ( ‘Key is cleared ! ‘);
} )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
localforage.setItem ( ‘ key1 ‘ ‘ value1 ‘, function (err , value) { // do other things after the value was saved . console.log (value); } ) ; // get localforage.getItem ( ‘ key1 ‘ ) . Then (function ( value) { // Using promises of SS6 console.log (value); } ) ; // remove localforage.removeItem ( ‘ key1 ‘, function (err ) { console.log ( ‘Key is cleared ! ‘); } ) |
Angular module
Now we know , potential localforage , what if do you connect with Angular.js ?.
angular – Localforage
It is a module created by the user ocombe Angular.js in which we use the full potential of localforage and Angular.js speed .
Installation
1 .- angular Download module
2 .- Add localforage and angular – localForage our index.html
<!doctype ng-app="yourModule">
<html>
<head>
<!-- localforage before angular.localforage.js -->
<script type="text/javascript" src="localforage.js">
<script type="text/javascript" src="angular.localforage.js">
</head>
<body>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype ng-app="yourModule"> <html> <head> <!-- localforage before angular.localforage.js --> <script type="text/javascript" src="localforage.js"> <script type="text/javascript" src="angular.localforage.js"> </head> <body> </body> </html> |
3. Add as angular dependence
angular.module(‘yourModule‘, [‘LocalForageModule‘]);
|
1 |
angular.module(‘yourModule‘, [‘LocalForageModule‘]); |
4 .- Set the driver database , all configuration parameters are the same for all drivers .
angular.module(‘yourModule‘, [‘LocalForageModule‘])
.config([‘$localForageProvider‘, function($localForageProvider){
$localForageProvider.config({
driver : ‘localStorageWrapper‘, // if you want to force a driver
name : ‘myApp‘, // name of the database and prefix for your data, it is "lf" by default
version : 1.0, // version of the database, you shouldn‘t have to use this
storeName : ‘keyvaluepairs‘, // name of the table
description : ‘some description‘
});
}]);
|
1 2 3 4 5 6 7 8 9 10 |
angular.module(‘yourModule‘, [‘LocalForageModule‘]) .config([‘$localForageProvider‘, function($localForageProvider){ $localForageProvider.config({ driver : ‘localStorageWrapper‘, // if you want to force a driver name : ‘myApp‘, // name of the database and prefix for your data, it is "lf" by default version : 1.0, // version of the database, you shouldn‘t have to use this storeName : ‘keyvaluepairs‘, // name of the table description : ‘some description‘ }); }]); |
5 .- To use this module you need to inject dependency “$localForage ” and use the same sentence as in localforage
angular.module(‘yourModule‘, [‘LocalForageModule‘])
.controller(‘yourCtrl‘, [‘$scope‘, ‘$localForage‘, function($scope, $localForage) {
$localForage.setItem(‘myName‘,‘Olivier Combe‘).then(function() {
$localForage.getItem(‘myName‘).then(function(data) {
var myName = data;
});
});
}]);
|
1 2 3 4 5 6 7 8 |
angular.module(‘yourModule‘, [‘LocalForageModule‘]) .controller(‘yourCtrl‘, [‘$scope‘, ‘$localForage‘, function($scope, $localForage) { $localForage.setItem(‘myName‘,‘Olivier Combe‘).then(function() { $localForage.getItem(‘myName‘).then(function(data) { var myName = data; }); }); }]); |
Follow this link for the complete documentation of angular-localforage and this for localforage .