LocalStorage in RC.4

Ionic Framework ionic-v3
1

Hello,
My previous app was written on ionic2 some alpha version which used LocalStorage. Now I’m updating app on ionic2 rc.4 version which uses better storage drivers if available. I want data to be migrated to new storage. How can I access LocalStorage from ionic2 rc.4?

I tried to solve problem this way:

sudo npm install localforage --save
sudo npm install @types/localforage --save

home.ts:

import { Storage } from '@ionic/storage';
import localforage from 'localforage';

…

constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    localforage.setDriver(localforage.LOCALSTORAGE);
    localforage.getItem<any>('myItem').then((myItem) => {
        this.storage.set('myNewItem', myItem);
        localforage.removeItem('myItem');
    }
}

But this seems not to switch to LocalStorage :disappointed_relieved:
Hope I’m not the only one searching for solution. Maybe someone already solved it?

2 
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    localforage.setDriver(localforage.LOCALSTORAGE);

    alert("Driver: " + localforage.driver()); // shows null
    alert("SupportLocal: " + oldStorage.supports(localforage.LOCALSTORAGE)); // shows true

    localforage.getItem<any>('myItem').then((myItem) => {
        this.storage.set('myNewItem', myItem);
        localforage.removeItem('myItem');
    }
}

localforage.LOCALSTORAGE is supported but for some reason is not loaded.

3

OK, I got it working.
Create a new instance of localforage and set localstorage driver to it:

let oldStorage = localforage.createInstance({
    name: "oldLS"
});

oldStorage.config({
    driver: localforage.LOCALSTORAGE,
    name: ""
});

oldStorage.getItem<any>('counter').then((counter) => {
    console.log(counter);
}

I hate to admit, but I had to “hack” localstorage source a bit because it did not let me read plain keys like “counter”. It added “name” + “/” from config before key, so with configuration as above it would be able to read key “/counter”.

So my “hacks” are in file:
node_modules/localforage/dist/localforage.js
line 1699 becomes:
dbInfo.keyPrefix = '';//dbInfo.name + '/';
and line 1752 becomes:
result = result;//dbInfo.serializer.deserialize(result);

The first “hack” is for driver to be able to read “counter” not “/counter” and second is for returning plain value because it tried to deserialize a string and threw error about flags - it tried to interpret letters as flags. My counter had letters in it.

Hope it will be useful for someone.
Please comment if you have a better solution.

4

Because LocalStorage doesn’t support multiple “instances”, there’s a single storage for your app so all “instances” will write to the same storage. The prefix is to prevent different instances from overwriting each other’s entries.

What’s the advantage of using LocalForage if you explicitly configure it to always use LocalStorage anyway? You may as well use LocalStorage directly.

5

My previous version of app used LocalStorage so I want new app read LocalStorage values and save them to new, better storage. That’s why I want to connect to LocalStorage. And I think LocalForage should give an opportunity for developers to read values specifying plain keys (no additional prefixes). My app used keys “counter”, “blabla” (I know that’s bad) … and I could not access them without “hacking” LocalForage library.