Best way to store app data

Questions
1

I am retrieving data via app.request.json() and up until now I have been using app.form.storeFormData() to store this so it will be available if the app restarts offline. Is this an acceptable way of doing this or am I mis-using the method? It seems to work but there is no actual form for this app data.

2

It is totally fine. But if you have a lot of data then it is better to go with localForage https://github.com/localForage/localForage

3 Likes
3

Thanks for your reply Vladimir. What do you define as being a lot of data? I have a 100kb json file that I fetch from the server, unpack and then store using app.form.storeFormData().

How does it work? Is you method a browser cookie or cache or something? Will it ever get deleted over time or is it a safe storage method?

4

@nolimits4web Whilst I’m asking you a question about storage, what would you recommend for local image caching or storage in Framework7? I’d like for the app to be able to display images offline by default and fallback to remote image sources.


I started a question about it here but I think I’m in out of my depth with it.

5

100kb is fine with localStorage (it is used by storeFormData).

localForage uses indexedDb or webSql where supported. It has much more storage quota.

1 Like
6

I saw this, but didn’t reply because didn’t face this problem or haven’t tried to implement it. The problem is pretty complex.

As for storage, if it is a cordova app, i can recommend you to store images as files using cordova File Transfer. But in case you may have a lot of different images, then your app size may be increased a lot. So the logic becomes more complex as it will require you to watch that size and somehow remove old image files. For webapp, it is better to go with localForage but again, it has limited storage type and images can be large

1 Like
7

So in terms of implementing what @centrual talks about in the post, would this be possible without having to rewrite everything using the vue structure?

8

Try to compress a base64 encoded string and store in localstorage

9

@robinyip Thank you I had a look into it but …

input filesize 50 KB

jpg file → base64 encoded → LZ-String compression

output filesize 183 KB

This more than triples the storage needs, and if the localStorage maximum is 5 MB then this is not practical.
It seems this compression technique is great for text with files where repeating patterns occur and it does seem very fast, but images would be best left as jpgs.

1 Like
10

@nolimits4web … If I wanted to try out the vue.js <offline-image> implementation that is described in the linked post, is it possible for me to activate vue inside my existing Framework7 project without having to translate everything into the vue syntax? Once I’ve installed and included vue and framework7-vue.min.js, can I mix the <f7-> markup syntax with the standard html or is it one or the other?

11

You can mix it, but in order to make it work on all pages you need to use F7-Vue router, and convert all your pages to Vue components and init app and use it in a Vue-way :). I think you can try to create web-component instead that can do the same

12

Thanks. I think creating a web-component might be beyond my expertise. I’ll try to look into this but it’s probably over my head.

13

I’ve been struggling and hacking at my app code all day. Firstly I started trying to convert it all to F7-Vue and then on deciding that this is more effort than it’s worth and reverting; I’ve been failing at implementing imgcache.js. :confounded:

Please could you point me in the right direction for something that might work smoothly with Framework7, I don’t know where to start with creating a custom web-component.

14

Here is a nice guide https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/