LocalStorage seemed like a thin wrapper around LocalForage anyway. You could try using LocalForage directly.
I haven’t needed to do this yet, so I can’t say for sure. You will probably need to install @types/localforage
and import localforage from 'localforage'
at a minimum to get started.
@rapropos you sir deserve a very cold and large beer!
Thanks it worked!
for @theromis heres what i did:
install it:
npm install @types/localforage npm install localforage
import it:
import * as localforage from "localforage";
and then change set, get remove, clear
to their new values,
example:
localforage.setItem('key', 'value' );
github: https://github.com/localForage/localForage
api doc: https://localforage.github.io/localForage/
Ionic Team is LocalStorage supported in RC0?
I’m digging into this too. Actually there is no need to install localforage. Like @rapropos said, LocalStorage uses LocalForage.
I imported Storage from @ionic/storage
and used the same way you are using localforage, but the syntax is a bit different. Instead of:
localforage.setItem('key', 'value' );
use:
storage.set('key', 'value');
The same for getItem and get.
yeah saw that too.
but it’s either importing Storage or installing localforage.
Seeing as they dropped LocalStorage from ionic i believe it’s a safer bet to use localforage on its own… but thats just a personal choice.
when I do
import * as localforage from "localforage";
[21:40:11] rollup: Export ‘config’ is not defined by …
[21:40:11] rollup: Export ‘setItem’ is not defined by …
[21:40:11] rollup: Export ‘getItem’ is not defined by …
[21:40:11] rollup: Export ‘clear’ is not defined by …
and when I do
import localforage from 'localforage';
I didn’t face error in the tray but it seems to didn’t work.
any idea?
So I remember (now) that importing Localforage didn’t work, that’s why I used to have to set it as required, like this
declare let require: Function;
const localforage: LocalForage = require('localforage');
but when I do this, at runtime, I’ve got the error
file.js:11 Uncaught ReferenceError: require is not defined
any idea?
Got it (I like to answer my self
Import as to be done like following
import localforage from 'localforage';
Important, when you use setItem and getItem don’t forget to add the type of the object to save!
localforage.setItem<any>('key', object);
localforage.getItem<any>('key');
Of course replace with your type or let as you want.
Compilation is now ok, running with ionic serve is ok too and I confirm that in debug I see my informations into IndexedDB
P.S.: And for those who use localstorage
From release notes:
Storage has been removed from ionic-angular and placed into a separate module, @ionic/storage. Starters have been updated to add this, make sure to add it to your package.json if you’re using the storage system. See more details here.
=>
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#storage
This did not seem to work for me.
what’s the error you get?
I am getting the following error:
[03:04:28] Error: Module c:\Projects\POC1\node_modules\localforage\dist\localforage.js does not export default (imported by c:\Projects\POC1\node_modules\@ionic\storage\es2015\storage.js)
at Module.trace (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:7677:29)
at ModuleScope.findDeclaration (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:7300:22)
at Scope.findDeclaration (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5351:39)
at Scope.findDeclaration (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5351:39)
at Identifier.bind (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:6489:29)
at C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5151:50
at AssignmentExpression.eachChild (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5168:5)
at AssignmentExpression.bind (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5151:7)
at AssignmentExpression.bind (C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5511:23)
at C:\Projects\POC1\node_modules\rollup\dist\rollup.js:5151:50
I may have gotten around this by adding this to a custom rollup config:
plugins[
commonjs({
include: {
'node_modules/localforage/**'
}
})
]
Still have other issues so can’t confirm yet.
Hey @alejandrocao, I finished my migration and localforage seems to work fine for me. If I reckon I did
-Installlocal forage:
sudo npm install localforage --save
-Install definition
sudo npm install @types/localforage --save
-As I already mentioned (see above), no more * in import and it’s important to not forget to specify the types (like getItem and setItem) when you use the library
Let me knows if these steps worked for you too, hope so
Here is what I did to make it work:
- Enlisted Storage in app.module providers array:
@NgModule({ providers: [.., Storage]
- Extended
node_modules\@ionic\app-scripts\config\rollup.config.js
:
plugins: [
builtins(),
commonjs({
include: [
'node_modules/rxjs/**',
'node_modules/firebase/**',
'node_modules/angularfire2/**',
'node_modules/localforage/**'
],
I think node_modules/@types/localforage
was already installed by ionic. Although it works it feels kinda hacky so I’m still interested in the proper solution for this.
I had the same issue you had, your solution worked for me, Thanks!!
As @gasaki already mentioned you should use @ionic/storage
.
This uses LocalForage when running in a desktop browser only if no “better” option is available or e.g. SQLite when running on a device.
Here is the description:
/**
- Storage is an easy way to store key/value pairs and other complicated
- data in a way that uses a variety of storage engines underneath. Currently,
- Storage uses localforage underneath to abstract away the various storage
- engines while still providing a simple API.
- When running natively, Storage will prioritize using SQLite, as it’s one of
- the most stable and widely used file-based databases, and avoids some of the
- pitfalls of things like localstorage that the OS can decide to clear out in
- low disk-space situations.
- When running in the web or as a Progressive Web App, Storage will attempt to use
- IndexedDB, WebSQL, and localstorage, in that order.
*/
I’d like to note that you can avoid the neccessity of editing the rollup.config.js in the node_modules by
creating a rollup.config.js
and mention it in package.json
like the Ionic conference app does.