Save user "SELECT INPUT" using LocalStorage in html table

Question

I have a HTML table and with question and 8 SELECT ROW OR SELECT from user that requires user to select data and as the user selects on the selection it should save so when the the user refresh/reloads or closes the web-page and opens the web-page back up the data must show on what he selected previously.

I tried the simple method using local storage to get data selected by user to save and display for the first select_row but doesn't work because it get into conflict when i try to get and save the data from same place. so just to see what i did on my work i made the line of code to show under scripts if when the user selects

let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
  doc = document;
  htm = doc.documentElement;
  bod = doc.body;
  nav = navigator;
  M = tag => doc.createElement(tag);
  I = id => doc.getElementById(id);

  mobile = /Mobi/i.test(nav.userAgent);
  S = (selector, within) => {
    let w = within || doc;
    return w.querySelector(selector);
  }
  Q = (selector, within) => {
    let w = within || doc;
    return w.querySelectorAll(selector);
  }
  hC = (node, className) => {
    return node.classList.contains(className);
  }
  aC = (node, ...classNames) => {
    node.classList.add(...classNames);
    return aC;
  }
  rC = (node, ...classNames) => {
    node.classList.remove(...classNames);
    return rC;
  }
  tC = (node, className) => {
    node.classList.toggle(className);
    return tC;
  }
  // small Library above - magic below can be put on another page using a load Event *(except // end load line)*
  const trs = Q('tbody>tr'),
    trsL = trs.length,
    prs = Q('tfoot>tr>td+td'),
    prsM = prs.length - 1,
    ya = [];

  function showAverages() {
    let total = 0;
    for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
      c = 0;
      for (let i = 0; i < l; i++) {
        c += ya[i][p];
      }
      t = (c / l * 100).toFixed(2);
      prs[p].textContent = t;
      total += (+t);
    }
    $("#element").html((total / prsM).toFixed(2) + "%");
  }

  for (let i = 0, r, sels, y; i < trsL; i++) {
    r = trs[i];
    sels = Q('select', r);
    ya.push([]);
    for (let n = 0, s, q = sels.length; n < q; n++) {
      s = sels[n];
      s.value = 'Yes';
      y = s.value === 'Yes' ? 1 : 0;
      ya[i].push(y);
      s.oninput = () => {
        ya[i][n] = s.value === 'Yes' ? 1 : 0;
        showAverages();
      }
    }
  }
  showAverages();
});

//Local Storage Script
let select_row = document.getElementById('select_row');
select_row.addEventListener('input', function() {
  localStorage.setItem('select_row', select_row.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
select_row.value = localStorage.getItem('select_row');

thead *,
tfoot * {
  font: bold 16px Arial, san-serif;
}

tfoot>tr>td:not(:last-child):after {
  content: '%';
  font-weight: bold;
}



  
    
      
        
          
             WebForms                                            
                                  Total Percent Complete = 
          
        
      
      
        
          
            
              
                 WebForm Tasks 

                
                  
                    
                      Tasks
                      Avi - Lead
                      Benito
                      Carlos
                      Greg
                      Krish
                      Roy
                      Dee
                      Notes
                    
                  
                  
                    
                      CR Service Request Form
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                       
                    
                    
                      CR Pallet Reuqest Form
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                       
                    
                  
                  
                    
                      Percent Complete

any data it will save and show but not working. Any help will appreciated

Barmar · Accepted Answer

When the user changes a select, put the values of all the selects in an array, and save it to localStorage as JSON.

When the page loads, parse the JSON, and then update the values of all the selects from the array.

function save_selects() {
  const select_values = Array.from(selects).map(s => s.value);
  localStorage.setItem('select_values', JSON.stringify(select_values));
}

window.addEventListener("load", function() {
  const selects = document.querySelectorAll(".select_row select");
  selects.forEach(s => s.addEventListener('change', save_selects));

  const loc = localStorage.getItem('select_values');
  if (loc) {
    const select_values = JSON.parse(loc);
    selects.forEach((s, i) => s.value = select_values[i]);
  }
});

Save user "SELECT INPUT" using LocalStorage in html table

Answers (2)

Related Questions

Save user &quot;SELECT INPUT&quot; using LocalStorage in html table

Answers (2)

Related Questions

Save user "SELECT INPUT" using LocalStorage in html table