Installation
Follow the instructions on this link
LocalForage
|
|
<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'
});
|
Localforage drivers are supported by :
localforage.INDEXEDDB localforage.WEBSQL localforage.LOCALSTORAGE Examples
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>
|
3. Add as angular dependence
|
|
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'
});
}]);
|
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;
});
});
}]);
|
Follow this link for the complete documentation of angular-localforage and this for localforage .
