Save dynamic table to LocalStorage

Question

I have a dynamic table in my webapplication. I want to save this table to the LocalStorage. I tried many things but nothing worked.

This is the HTML of the table:

jQuery(document).delegate('a.add-record_alg', 'click', function(e) {
  e.preventDefault();
  var content = jQuery('#sample_table_alg tr'),
    size = jQuery('#tbl_posts_alg >tbody >tr').length + 1,
    element = null,
    element = content.clone();
  element.attr('id', 'rec_alg-' + size);
  element.find('.delete-record_alg').attr('data-id', size);
  element.appendTo('#tbl_posts_body_alg');
  element.find('.sn').html(size);
});
jQuery(document).delegate('a.delete-record_alg', 'click', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm == true) {
    var id = jQuery(this).attr('data-id');
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec_alg-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_alg tr').each(function(index) {
      //alert(index);
      $(this).find('span.sn').html(index + 1);
    });
    return true;
  } else {
    return false;
  }
});






   Toevoegen 



  
    
      
        
          Nummer
          Naam
          Gebruiksfunctie
          Gebruiksoppervlakte [m2]
          Verwijderen

preferably i want to store the table to the LocalStorage per table data, because i need some values later again on a different page. I tried saving the whole table to the LocalStorage which is possible, but what i said, i need the table data's later again.

Can someone please help me out? (i hope i explained it well xD)

Thanks in advance!

user_295783 · Answer

delegate is deprecated. Just use .on - note I added the .on to the table in the delete
Please be consistent with jQuery/$
I store the DOM outerHTML.
You will need to ALSO delegate where you decide to render the table again

const $table = $("#tbl_posts_alg");
const addToStorage = () => {
 // localStorage.setItem("table",$table[0].outerHTML);  // UNCOMMENT ON YOUR SERVER   
   console.log($table[0].outerHTML); //SO does not allow localStorage in snippets
};
$(document).on('click','a.add-record_alg', function(e) {
  e.preventDefault();
  var content = $('#sample_table_alg tr'),
    size = $('#tbl_posts_alg >tbody >tr').length + 1,
    element = null,
    element = content.clone();
  element.attr('id', 'rec_alg-' + size);
  element.find('.delete-record_alg').attr('data-id', size);
  element.appendTo('#tbl_posts_body_alg');
  element.find('.sn').html(size);
  addToStorage()
});
$table.on('click','a.delete-record_alg', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm) {
    var id = $(this).attr('data-id');
    var targetDiv = $(this).attr('targetDiv');
    $('#rec_alg-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_alg tr').each(function(index) {
      //alert(index);
      $(this).find('span.sn').html(index + 1);
    });
    addToStorage();
  }
  return didConfirm;
});






   Toevoegen 



  
    
      
        
          Nummer
          Naam
          Gebruiksfunctie
          Gebruiksoppervlakte [m2]
          Verwijderen

user_2813224 · Answer

`[name]` Attribute

In the example, there are 4 [name]s given to the form controls of each row:

nummer
naam
functie
inputtext

The [name] attribute is used by various APIs to identify groups of form controls so they can be easily grouped for specific behavior (ex. radio button groups) or collecting their values, etc. Also, an #id was assigned to

When reviewing the example,

add a couple of rows and enter some data in the form controls (leave a couple of them empty).
click the Save button.
the console should have an object:

{
  nummer: ['value from row1', 'value from row2', '','value from row4'],
  naam: ['', 'value from row2', 'value from row3', ''],
  functie: ['verblijfsruimte', 'toiletruimte', 'verkeersruimte', 'verblijfsruimte'],
  inputtext: ['', '', 'value from row3', 'value from row4'],
  size: 4
}

The property "size" is the number of that '#tbl_posts_body_alg' had when the data was extracted which is useful should you need to load the data from localStorage and render a

for the data. Note, that the actual line that calls a function that utilizes localStorage has been commented out. The reason why is because SO prohibits its use, so uncomment it when testing anywhere but here on SO. I did not write a function that loads the form data and renders html because there wasn't anything specific about the other page you intend to add the data to.

Details are commented in example

jQuery(document).delegate('a.add-record_alg', 'click', function(e) {
  e.preventDefault();
  var content = jQuery('#sample_table_alg tr'),
    size = jQuery('#tbl_posts_alg >tbody >tr').length + 1,
    element = null,
    element = content.clone();
  element.attr('id', 'rec_alg-' + size);
  element.find('.delete-record_alg').attr('data-id', size);
  element.appendTo('#tbl_posts_body_alg');
  element.find('.sn').html(size);
});
jQuery(document).delegate('a.delete-record_alg', 'click', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm == true) {
    var id = jQuery(this).attr('data-id');
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec_alg-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_alg tr').each(function(index) {
      //alert(index);
      $(this).find('span.sn').html(index + 1);
    });
    return true;
  } else {
    return false;
  }
});

/**
 * @desc - Saves stringified data to localStorage
 * @param {string} key - A string that the data will be stored under
 * @param {any} data - Any type except functions are allowed to be stored
 */
const saveData = (key, data) => localStorage.setItem(key, JSON.stringify(data));

/**
 * @desc - Loads parsed data from localStorage
 * @param {string} key - A string that the data is stored under
 * @return {any} - Any data stored under given key
 */
const loadData = key => JSON.parse(localStorage.getItem(key));

/**
 * @desc - Extracts name/value from each form control of a given 
 * @param  {string} formIdName - An id or name of a 
 * @return {object} - An object of [name]: [value, value,...]
 */
function xData(formIdName) {
  const form = document.forms[formIdName];
  const data = new FormData(form);
  let result = {};
  for (let [name, value] of data) {
    if (!result[name]) {
      result[name] = [];
    }
    result[name].push(value);
  }
  return result;
}
    
$('.save').on('click', function() {
  let x = xData('data');
  let size = $('#tbl_posts_body_alg tr').length;
  x.size = size;
  console.log(x);
   /* localStorage is disabled on SO, uncomment the line when using 
   within an environment where localStorage is permitted
   *//*
   saveData('data', x);
   */
});



   Toevoegen

Nummer	Naam	Gebruiksfunctie	Gebruiksoppervlakte [m2]	Verwijderen

Save dynamic table to LocalStorage

2 Answers

[name] Attribute

`[name]` Attribute