Remove all form data

Questions
1

Is there a way to remove all form data ever stored for an app? Kind of like app.form.removeFormData() but for everything.
I may have chopped and changed with data ids whilst developing and would like to flush everything out.

2

window.localStorage.clear() :slight_smile:

3

Or manually go through every localStorage entry and delete the ones which names start with f7form-

1 Like
4

Thanks for that.

Another localStorage related question… Do I need to reference $app or app inside a method for the form functionality?
I’ve been going this but I wondered if it’s wrong? Do I need app = self.$app or should I leave it out?

methods: {
  someFunction: function() {
    var self = this, app = self.$app;
    var data = {};
    app.form.storeFormData('id', data);
  }
}
5

You need to keep it like you do

6

@nolimits4web. I’m trying to trace a bug in my app related to a app.form.storeFormData() call… I wanted to see if data is actually getting stored at certain points. How can I hook into the event? I’m trying this but it’s not showing anything in the console :

<script>
  return {
    methods: {
      onFormStoreData: function (form, data) {
        console.log('onFormStoreData');
        console.log(form);
        console.log(data);
      },
    },
    on: {
      pageInit: function() {
        const self = this, app = this.$app;
        app.form.storeFormData('test', { foo: 'bar' });
      }
    },
    created: function() {
      const self = this, app = self.$app;
      app.on('formStoreData', self.onFormStoreData);
    },
    beforeDestroy: function() {
      const self = this, app = self.$app;
      app.off('formStoreData', self.onFormStoreData);
    }
  }
</script>

I notice that this event is getting triggered only on my settings page where there is a form with class .form-store-data but not when I am manually calling app.form.storeFormData(). What am I doing wrong?

7 
<script>
  return {
    methods:{
      onFormStoreData: function (form, data) {
        app.form.storeFormData(form,data);
        console.log('done!');
      }
    },
    on: {
      pageInit:function(){
        const self = this, app = this.$app;
        app.emit('myFormStoreData','test',{ foo: 'bar' });
        //app.form.storeFormData('test', { foo: 'bar' });
      }
    },
    created:function(){
      const self = this, app = self.$app;
      app.on('myFormStoreData', self.onFormStoreData);
      //app.on('formStoreData', self.onFormStoreData);
    },
    beforeDestroy:function(){
      const self = this, app = self.$app;
      app.off('myFormStoreData', self.onFormStoreData);
      //app.off('formStoreData', self.onFormStoreData);
    }
  }
</script>
8

Could you explain this please. I don’t understand how emitting a fake event helps?

My problem is that it seems to not be saving the data and I want to be able to hook into the save event to debug.

9 
formStoreData

emit itself on a “real” element

you are not using it correctly
so the “emit” get lost somewhere

anyway

localStorage.setItem()

is “sync call”
so:

localStorage.setItem('item','value');
console.log(
  'the data has been stored, for sure!\
   otherwise you not gonna see this output'
)
10

Do you think it might be a problem that my id is storage?

app.form.storeFormData('storage', {foo:'bar'});
console.log(app.form.getFormData('storage'));
11

Some context of my problem, I cannot seem to store my local cached file name under the storage localStorage namespace :

<img src="{{image}}">

<script>
  return {
    data: function () {
      var self = this, app = this.$app;
      var data = app.form.getFormData('storage');
      var image = data.imagelocal ? data.imagelocal : data.image;
      return {
        data: app.form.getFormData('storage'),
        data: data,
        image: image
      }
    },
    methods: {
     cacheImage: function (src) {
        var self = this, app = self.$app, data = self.data;
        ImgCache.isCached(src, function(path, success) {
          if (success) {
            console.log('already cached');
          } else {
            ImgCache.cacheFile(path, function (localpath) {
              console.log('adding cache image : '+localpath);
              data.imagelocal = localpath;
              app.form.storeFormData('storage', data);
            });
          }
        }); 
      }
    },
    on: {
      pageInit: function() {
        const self = this, app = this.$app, data = self.data;
        self.cacheImage(data.image);
        // I would expect this to show a local image path on second page visit
        console.log(app.form.getFormData('storage').imagelocal)
      },
    }
  }
</script>
12

absolutely NO problem with namespace => ‘storage’

“this” inside pageInit has a completely different context
from “this” inside methods

fix it

13

I’m not sure what you mean, I logged out both from a method call and from pageInit and they look the same…

09
Screen Shot 2018-04-08 at 17.17.09.png994×1692 288 KB

14

my meastake

thought you are using “page” instead of “this”