scotttrinh / angular-localforage Goto Github PK
View Code? Open in Web Editor NEWAngular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)
License: MIT License
Angular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)
License: MIT License
I have a couple related questions:
If I bind the same LocalForage value to $scope variables in different parts of my app (e.g. two different directives), will a change to the LocalForage value automatically update the $scope values for both directives?
I'm thinking of using angular-localForage to create a common client-side model of my app that my different views can then access in order to keep elements synchronized which are accessed in multiple places. Is that a reasonable approach? Is there a place to read best practices for this?
Building on question 2 (best practices): What are best practices for storing model data in angular-localForage which has associations? e.g. if I have a bunch of rooms, each of which have a bunch of users, then I need to store all the users per room. Should I only store user id's per each room key? The downside to doing this is that I'd need to make a ton of calls binding to localForage. However, if I store full users per each room key, then it's going to be a big headache trying to keep them all in sync.
Thanks!
Initialization code doesn't detect NodeJs when using Electron.
Hi there,
One super useful example might be, how to use a single database, but multiple stores.
The current example shows that database and store are set in the same config. If you had multiple stores inside of one database, it would be worthwhile to see how you could set the database at the app level, and set individual stores at the service level.
Is this something that'd be possible?
Is it possible to use the bind
function to bind to a particular element in a scope array? e.g. if I wanted to bind a stored message array to the array scope.messages, I would do $localForage.bind($scope, 'messages')
.
But suppose I wanted to bind a particular stored message to a particular index within a scope array. Is there a way to do something like
$localForage.bind($scope, {
key: 'message',
scopeKey: 'messages[0]'
});
Thanks!
I noticed that an automatic injection of the bower dependencies in the html file by using a "grunt bower-install" command injects this:
<script src="bower_components/localforage/dist/localforage.min.js"></script>
<script src="bower_components/localforage/dist/backbone.localforage.min.js"></script>
<script src="bower_components/angular-localForage/angular-localForage.js"></script>
The backbone file will throw a syntax error when loading. It should not be there I guess...
We could add an encryption functionality such as the one described in ngStore for Angular 2: https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit#heading=h.57girrphcre7
And something like that maybe: https://github.com/jas-/secStore.js
it's been about 1 month since the last commit. I'd like to use this but I can't since it's missing some commits from mozilla/localForage that fix several issues.
for example: localForage/localForage#253
please update :)
Can I set up key path and auto increment by using localForage?
Hi mate,
thank you for yours great work! I have a question for you. Can you make bower install angular-localForage compatible with lastest localForage release (0.30) ? Now it has dependencies with 0.20 version. Thank you =)
$localForageProvider.config({
name: 'ab' // name of the database and prefix for your data
});
But calling $localForage.prefix()
returns an empty string and 'ab' is not applied when setting items.
I've a scope variable that I'm watching at. Based on this variable I bind to a localForage key. In case of change, I want to unbind the 'old' value and bind the 'new'.
The current unbind method will delete the data stored for this key, what is not the intended behavior (the opposite of bind())
Either I'm wrong with my use-case and the usage of this library or unbind has a strange behavior.
To overcome my issue i currently I replaced the unbind method with:
LocalForageInstance.prototype.unbind = function unbind($scope, opts) {
if(angular.isString(opts)) {
opts = {
key: opts
}
} else if(!angular.isObject(opts) || angular.isUndefined(opts.key)) {
throw new Error("You must define a key to unbind");
}
var defaultOpts = {
scopeKey: opts.key,
name: defaultConfig.name
};
// If no defined options we use defaults otherwise extend defaults
opts = angular.extend({}, defaultOpts, opts);
var self = lfInstances[opts.name];
if(angular.isUndefined(self)) {
throw new Error("You must use the name of an existing instance");
}
// $parse(opts.scopeKey).assign($scope, null);
if(angular.isDefined(watchers[opts.key])) {
watchers[opts.key](); // unwatch
delete watchers[opts.key];
}
return $q.when(true);
};
I followed through with the readme by installing both localforage and angular-localforage with bower
.
I tried bundling both files with browserify and I keep getting the following error in chrome:
TypeError: Cannot read property 'config' of undefined
at new LocalForageInstance (http://localhost:3000/angular-localforage/dist/angular-localforage.js:57:17)
Prior to this error I was getting other errors in localforage
about not being able to find the drivers and the promise library.
Any thoughts?
Hi,
I'm having issues with the new way of setting a prefix with localstorage. (Seems to work with IndexedDB though)
When forcing the use for localstorage for debugging and setting a custom prefix:
// configure localForage
.config(function ($localForageProvider) {
$localForageProvider.config({
driver: 'localStorageWrapper',
name: 'webGUI'
});
});
I end up with the prefix localforage/lfp
instead.
Can you reproduce this behaviour?
Hi,
I am trying to add this library to my ionic project, but the result of command
ionic add angular-localforage
is
Failed to find the bower component "angular-localforage".
Are you sure it exists? (CLI v1.3.21)
Your system information:
OS: Windows 8
Node Version: v0.10.33
Cordova CLI: 4.2.0
Ionic CLI Version: 1.3.21
add [name] ................................ Add an Ion, bower component, or addon to the project
[name] The name of the ion, bower component, or addon you wish to install
If I run
bower install angular-localforage
I get:
bower angular-localforage#* cached git://github.com/ocombe/angular-localForage.git#1.2.2
bower angular-localforage#* validate 1.2.2 against git://github.com/ocombe/angular-localForage.git#*
bower localforage#1.2.0 cached git://github.com/mozilla/localForage.git#1.2.0
bower localforage#1.2.0 validate 1.2.0 against git://github.com/mozilla/localForage.git#1.2.0
Unable to find a suitable version for localforage, please choose one:
1) localforage#1.2.0 which resolved to 1.2.0 and is required by angular-localforage#1.2.2
2) localforage#~1.2.2 which resolved to 1.2.2 and is required by iPushPullPrefix the choice with ! to persist it to bower.json
Seems like the latest version is incompatible with latest version of localforage?
We should be able to get and set multiple items in one time by using an array as a key.
The localForage documentation indicates that something like:
localforage.getItem('foo').then(function(data) {
console.log(data);
});
should show data as null
, if there's no key named 'foo' in the localForage storage systems.
The localforage library itself returns null in this case, but if I use the angular wrapper to call $localForage.getItem('foo'), the promise resolves with undefined instead of null. This is a little different from expected behavior, which made my if (data === null)
code not quite detect key-not-found issues.
When dealing with binary types, angular-localForage seems to have trouble handling 'ArrayBuffer' type.
The vanilla localForage lib doesn't have this problem.
To reproduce the problem, just try to cache an ArrayBuffer & then retrieve it. The resulting object is empty.
So far, with only a simple change on line 123, I managed to solve it :
From
localCopy = typeof Blob !== 'undefined' && value instanceof Blob ? value : angular.copy(value);
To
localCopy = typeof Blob !== 'undefined' && typeof ArrayBuffer !== 'undefined' && (value instanceof Blob || value instanceof ArrayBuffer) ? value : angular.copy(value);
However, I cannot run the test suite because of
'Failed to start Sauce Connect'.
I may however have missed something special for dealing with ArrayBuffer with angular-localForage.
I read docs but i can't set array. how to set array ?
Can you make more easy array example ?
my array is $scope.test_arr = [{title: "test1", desc:"desc1"},{title: "test2", desc:"desc2"}]
Thank you
Hi, I'm using RequireJS at my project and I notice that when importing LocalForage, they don't register the global 'localforage' variable, so when this project looks for it an exception is raised.
Would be nice to add support for AMD/CommonJS module loading and be able of using this project in other environments.
i use angular-localForage in service and result in ReferenceError: localforage is not defined
the following is my service code
angular.module('starter.services', ['G','LocalForageModule']). .factory('LoginService',function($http,HOST,$localForage) {
$localForage.setItem("a",1);
});
Is there a reason why using:
$localForageProvider.config({
driver : localforage.INDEXEDDB, // if you want to force a driver
name : 'myDb',
would cause the error No available storage method found.
If I don't specify anything, it automatically falls back to WebSQL... I'm using the latest Chrome Version 42.0.2311.135 and according to http://caniuse.com/#search=indexeddb it should work :/
Help! :)
angular-localForage functionality overlaps with that of ngStorage. A comparison between the two that describes when each is more appropriate should be added to the README.
this will eventually cause a $$hashKey collision, resulting in an unusable app.
Is there a way to get results in sync?
I am using the following factory
.factory('test', function($localForage) {
var data = [];
$localForage.getItem('data').then(function(result){ data = result;} )
return {
getData : return data;
}
}
unfortunately it always returns an empty dataset
Hi there. Is it possible to have multiple dataStore in IndexedDB using angular-localForage?
I tried this:
var $tblStage = $localForage.createInstance({
storeName : 'tblStage', // name of the table
});
but it triggered an error which says:
Error: A localForage instance with the name dbName is already defined.
I've read this Question before but, is the only way is working with Raw IndexedDB? Or I missed something in my code? Any Idea?
I noticed while writing unit tests that setItem() doesn't trigger the promise in tests. If I add $rootScope.$apply(); after resolve function it'll work though, but it's in the $localForage code so I'm out of luck. Do you prefer some other way of doing it or can this be fixed somehow?
Reasoning behind $rootScope.$apply(); with unit tests:
https://docs.angularjs.org/api/ng/service/$q#differences-between-kris-kowal-s-q-and-q
Hello dude.
Becareful about $promise reference when the object contain $promises attribute.
In my case, I taken an object from $resource ($resource adds a $promise attr on my object by itself) and passing the same object to localForage it's not persisting.
If I set the $promise to null, before pass to localForage, it's stored.
I should add a method named pull
that would get a key and delete it from storage at the same time (based on this idea)
There is a new function iterate in localForage that should be released soon.
We should use it for the search
method, it would be a lot more efficient.
ping @GaelMagnan
By using this method to detect if the code is being executed by Node.JS, browserify compatibility is broken.
else if(typeof exports === 'object') {
module.exports = factory(root.angular, require('localforage')); // Node
}
1/
var defaultOpts = {
scopeKey: opts.key,
name: defaultConfig.name
};
name
should not be defaultConfig.name
but the instance database name
2/
return self.getItem(opts.key).then(function(item) {
if(item) { // If it does exist assign it to the $scope value
model.assign($scope, item);
} else if(opts.defaultValue) { // If a value doesn't already exist store it as is
model.assign($scope, opts.defaultValue);
self.setItem(opts.key, opts.defaultValue);
}
...
})
when item
evaluates to false, defaultValue overwrittes current value
test should be : typeof item!=='undefined'
the same issue occurs for opts.defaultValue
if I use localforage instead of $localForage, the returned value is 0 as expected
Thanks for looking into it!
Hi, I got an issue with the getItem method.
I'm using the right syntax :
$localForage.getItem(wkkeys).then(function(w) {..});
With wkkeys being an array of keys, but the function is never executed.
Any clue for this issue? I really don't understand what is going on.
Thanks
The file is angular-localForage.js
but the folder is named angular-localforage
(because of the name attribute in bower.json). Would it be feasible to update the name to angular-localForage
to be consistent with the repo and file?
It seems the setItem
function leaks memory (listeners);
Been debugging this from within our app (Sweebr/Issues#381), back to this module now. Need to check if this module is the leak or localForage
itself is leaking.
Using your example;
var storeDataI = 0;
function storeData() {
if( storeDataI > 50 ) { return false; }
setTimeout(function() {
$scope.store('sometext');
++storeDataI;
storeData();
}, 1000);
}
storeData();
I have tried to add this to ionic manually using the methods defined here.
I get an error message saying that localforagemodule is not defined. Or I get a message $localForage is not defined.
Documentation is inconsistent. Says $localforage and $localForage.
I have added localForage and angular-localForage via bower.
When I launch the app with these dependencies:
angular.module('<appname>', [
'ionic',
'config',
'ngCordova',
'uuid4',
'LocalForageModule'
])`
I have the module dependency error:
Error: [$injector:modulerr] Failed to instantiate module hsr001App due to:
[$injector:modulerr] Failed to instantiate module LocalForageModule due to:
[$injector:nomod] Module 'LocalForageModule' is not available!
I've tried with version 1.2.2 and 1.2.3, both are failing. Any Idea?
like setItem & getItem, removeItem needs to use the prefix: https://github.com/ocombe/angular-localForage/blob/master/angular-localForage.js#L85
A newbie here. Have installed angular-localForage through node.js, and redirect all the script files to the right path. Couldn't get the save button to save input value to local storage.
Use console.log() to debug. No errors shown when load up the page and angular should be working. But console.log() stop working right after $localForage.setItem(...).
I have also tried the examples from the Mozila-localForage and that one works just fine. I didn't change a thing except for reseting the path for script files, no idea what is wrong...
It is not actually an issue. But I don't know where to ask a question like this. In javascript (indexedDB), one can use an objectstore.app() function to store value into a key, which is incremental automatically. like
key value
0 {object1}
1 {object2}
The setitem() function in localForage could not accomplish this. Is there a simple function I can use to make that happen, or I have to use service to setup a logic?
Thanks.
Under which license angular-localForage is published? Right now i can't find any infos. Maybe you could add a LICENSE file?
Can you provide an example on how to search ($localForage.search)? Struggling in getting it to work.
Hi!
I got this error from angular-localForage:
Error: 'null' is not an object (evaluating 'key.indexOf')
The same code works well for IntexedDB and LocalStorage.
I tried to debug it and the problem lies around here:
promises.push(key(i).then(function(key) {
if(key.indexOf(p) === 0) {
keys.push(key.substr(p.length, key.length));
}
}));
and
var key = function(n) {
var deferred = $q.defer(),
args = arguments;
localforage.key(n).then(function success(key) {
deferred.resolve(key);
}, function error(data) {
onError(data, args, key, deferred);
});
return deferred.promise;
};
-> localforage.key(n)
This may be a localForage bug also.
at the 106 line of the angular-localForage.js
it should be if(notify.removeItem)
but if(notify.setItem)
.
because in the condition it broadcast removeItem event
Hi,
I added a small test in my fork: https://github.com/SiegfriedEhret/angular-localForage/blob/master/tests/angular-localForage.js
It fails because promises are not called.
Do you have any idea about this ?
Thanks.
Hi,
I'm new to angular and trying to implement localforage. Issue is probably my own ignorance , so my apologies upfront. Storing and getting via localforage all works well in Chrome and Firefox but the problem appears in IE (8-11). Specifically getting the error:
TypeError: Unable to get property 'config' of undefined or null reference
on line 58 of angular-localForage.js
It appears that the localforage object is not defined as I'm also getting an error (thrown before the error I mentioned above) with the localforage.js lib:
Object doesn't support this action
on line 1778.
I saw the previous issue #37 is similar so perhaps this is more of an issue for the localforage.js project?
Thanks for any insights you may provide.
I'm trying to setItem
an object and receiving the above error. It's infuriating because I'm overwriting the same object with a couple of properties on child objects changed/added, and yet something's not right with it.
I don't know if this is an issue with this library or with localForage itself, or with the data I'm passing but if you've seen it before please let me know! Cheers.
We should offer a plugin to enable storage compression (see this article and this lib for examples).
The source comment for bind() suggests that it returns the stored value, but the promise it returns only contains undefined.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.