Save dynamic table to LocalStorage-CodePudding

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;
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div >
  <a  data-added="0"><i ></i> Toevoegen </a>
</div>

<div  style="margin-left:1px ;">
  <form enctype="multipart/form-data">
    <table  id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <tr id="rec_alg-1">
          <td><input  type="text" name="" placeholder="Nummer"> </td>
          <td><input  type="text" name="" placeholder="Naam"> </td>
          <td>
            <label for="functie"> </label>
            <select  name="Functie" id="functie">
              <option value="verkeersruimte">selecteer een functie!</option>
              <option value="verkeersruimte">verkeersruimte</option>
              <option value="meterruimte">meterruimte</option>
              <option value="toiletruimte">toiletruimte</option>
              <option value="verblijfsruimte">verblijfsruimte</option>
              <option value="verblijfsruimte">techniekruimte</option>
              <option value="verblijfsruimte">bergruimte</option>
              <option value="verblijfsruimte">wasruimte</option>
              <option value="verblijfsruimte">badruimte</option>
              <option value="verblijfsruimte">onbenoemde ruimte</option>
            </select>
          </td>
          <td><input  type="text" name="" placeholder="[m2]"></td>
          <td><a  data-id="1"><i ></i></a></td>
        </tr>
      </tbody>
    </table>
</div>
</form>

<div style="display:none;">
  <table id="sample_table_alg">
    <tr id="">
      <td><input  type="text" name="" placeholder="Nummer"> </td>
      <td><input  type="text" name="" placeholder="Naam"> </td>
      <td>
        <label for="functie"> </label>
        <select  name="Functie" id="functie">
          <option value="verkeersruimte">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="verblijfsruimte">techniekruimte</option>
          <option value="verblijfsruimte">bergruimte</option>
          <option value="verblijfsruimte">wasruimte</option>
          <option value="verblijfsruimte">badruimte</option>
          <option value="verblijfsruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input  type="text" name="" placeholder="[m2]"></td>
      <td><a  data-id="0"><i ></i></a></td>
    </tr>
  </table>
</div>
</div>
</div>

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!

CodePudding user response：

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;
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div >
  <a  data-added="0"><i ></i> Toevoegen </a>
</div>

<form enctype="multipart/form-data">
  <div  style="margin-left:1px ;">
    <table  id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <tr id="rec_alg-1">
          <td><input  type="text" name="" placeholder="Nummer"> </td>
          <td><input  type="text" name="" placeholder="Naam"> </td>
          <td>
            <label for="functie"> </label>
            <select  name="Functie" id="functie">
              <option value="verkeersruimte">selecteer een functie!</option>
              <option value="verkeersruimte">verkeersruimte</option>
              <option value="meterruimte">meterruimte</option>
              <option value="toiletruimte">toiletruimte</option>
              <option value="verblijfsruimte">verblijfsruimte</option>
              <option value="verblijfsruimte">techniekruimte</option>
              <option value="verblijfsruimte">bergruimte</option>
              <option value="verblijfsruimte">wasruimte</option>
              <option value="verblijfsruimte">badruimte</option>
              <option value="verblijfsruimte">onbenoemde ruimte</option>
            </select>
          </td>
          <td><input  type="text" name="" placeholder="[m2]"></td>
          <td><a  data-id="1"><i ></i></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

<div style="display:none;">
  <table id="sample_table_alg">
    <tr id="">
      <td><input  type="text" name="" placeholder="Nummer"> </td>
      <td><input  type="text" name="" placeholder="Naam"> </td>
      <td>
        <label for="functie"> </label>
        <select  name="Functie" id="functie">
          <option value="verkeersruimte">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="verblijfsruimte">techniekruimte</option>
          <option value="verblijfsruimte">bergruimte</option>
          <option value="verblijfsruimte">wasruimte</option>
          <option value="verblijfsruimte">badruimte</option>
          <option value="verblijfsruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input  type="text" name="" placeholder="[m2]"></td>
      <td><a  data-id="0"><i ></i></a></td>
    </tr>
  </table>
</div>
</div>
</div>

CodePudding user response：

`[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 <form id='data'>

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 <tr> 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 <table> 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 <form>
 * @param  {string} formIdName - An id or name of a <form>
 * @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);
   */
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div >
  <a  data-added="0"><i ></i> Toevoegen </a>
  <button class='save btn btn-danger' type='button'>Save</button>
</div>

<div  style="margin-left:1px ;">
  <form id='data' enctype="multipart/form-data">
    <table  id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <tr id="rec_alg-1">
          <td><input  type="text" name="nummer" placeholder="Nummer"> </td>
          <td><input  type="text" name="naam" placeholder="Naam"> </td>
          <td>
            <label for="functie"> </label>
            <select  name="functie" id="functie">
              <option value="verkeersruimte">selecteer een functie!</option>
              <option value="verkeersruimte">verkeersruimte</option>
              <option value="meterruimte">meterruimte</option>
              <option value="toiletruimte">toiletruimte</option>
              <option value="verblijfsruimte">verblijfsruimte</option>
              <option value="verblijfsruimte">techniekruimte</option>
              <option value="verblijfsruimte">bergruimte</option>
              <option value="verblijfsruimte">wasruimte</option>
              <option value="verblijfsruimte">badruimte</option>
              <option value="verblijfsruimte">onbenoemde ruimte</option>
            </select>
          </td>
          <td><input  type="text" name="inputtext" placeholder="[m2]"></td>
          <td><a  data-id="1"><i ></i></a></td>
        </tr>
      </tbody>
    </table>
 </form>

<div style="display:none;">
  <table id="sample_table_alg">
    <tr id="">
      <td><input  type="text" name="nummer" placeholder="Nummer"> </td>
      <td><input  type="text" name="naam" placeholder="Naam"> </td>
      <td>
        <label for="functie"> </label>
        <select  name="functie" id="functie">
          <option value="verkeersruimte">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="verblijfsruimte">techniekruimte</option>
          <option value="verblijfsruimte">bergruimte</option>
          <option value="verblijfsruimte">wasruimte</option>
          <option value="verblijfsruimte">badruimte</option>
          <option value="verblijfsruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input  type="text" name="inputtext" placeholder="[m2]"></td>
      <td><a  data-id="0"><i ></i></a></td>
    </tr>
  </table>
  </div>
 
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

[name] Attribute

`[name]` Attribute