Storage of input data from virtual list


#1

I am new to Framework 7 and with basic js knowledge. I just find f7 to be very interesting to pick up basic mobile app dev.

I have the following in my app.VirtualList.create function in my component page. In short, it creates one list item into my listview with title, unit, quantity as placeholders. I can add more items using the VL appendItem feature. I believe by default it is saved in cache and wipe out after app restarts.

itemTemplate:
      '<li class="swipeout">' +
        '<div class="item-content swipeout-content">' +
          '<div class="item-inner">'+
            '<div class="item-title">' +
              '<input type="text" placeholder="New Item" name={{title}}>' +
              '<div class="item-footer"><input type="text" placeholder="piece" name={{unit}}></div>' +
            '</div>' +
            '<div class="item-after">' +
              '<input type="number" placeholder="1" min="0" max="10000" name={{quantity}}>' +
            '</div>' +
          '</div>' +
          '<div class="swipeout-actions-right">' +
            '<a href="#" class="swipeout-delete">Delete</a>' +
          '</div>' +
        '</div>'+
        '<div class="sortable-handler"></div>' +
      '</li>',

Question would be how I can store the title, unit and quantity in localStorage or say firebaseStorage as a JSON object? Looking at Form Storage, it looks to me that I need to have pre-defined name fields. However, this isn’t possible in a dynamic list.

Any advice or good practice for achieving it?

Thanks.