Save user Input using LocalStoarge in html table

Question

I have a HTML table and with 6 input boxes that requires user to enter data and as the user clicks on the input box it show save so when the the user the user refresh/reloads or closes the web-page and opens the web-page back up the data must show on what he entered previously.

I tried the simple method using local storage to get data entered by user to save and display for the first input box ("FY") 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 if it work made the line of code to show under the FY box if when the user enters any data it will save and show but not working. Any help will appreciated

function startTime() {
  var today = new Date();
  //                   1    2    3    4    5    6    7    8    9   10    11  12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33
  var suffixes = ['', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd'];

  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";

  var month = new Array(12);
  month[0] = "January";
  month[1] = "February";
  month[2] = "March";
  month[3] = "April";
  month[4] = "May";
  month[5] = "June";
  month[6] = "July";
  month[7] = "August";
  month[8] = "September";
  month[9] = "October";
  month[10] = "November";
  month[11] = "December";

  document.getElementById('txt').innerHTML = (weekday[today.getDay()] + ',' + " " + today.getDate() + '^{' + suffixes[today.getDate()] + '}' + " " + month[today.getMonth()] + " " + today.getFullYear() + " Time:   " + today.toLocaleTimeString());
  t = setTimeout(function() {
    startTime()
  }, 500);
}

// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("FY", document.getElementById("FY"));
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("FY");
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.aligned {
  display: flex;
  align-items: center;
}

span {
  padding: 10px;
}

.image {
  display: flex;
  align-items: center;
}

span {
  padding: 10px;
}

.corner {
  display: flex;
  align-items: right;
}

span {
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  margin-left: 320px;
  margin-right: 770px;
  margin-top: -748px;
}

th,
td {
  border: 1.5px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 1.5px
}

.html2canvas {
  width: 1700px !important;
  height: 1700px !important;
}

table tr {
  background: #ffdead;
}

table tr:nth-of-type(2) {
  background: white;
}

text-align: center;
body {
  background-color: #66b032;
}

h1,
th,
td {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

sup {
  vertical-align: super;
  font-size: smaller;
}


  
    
                           
            
                            Woodland DC  Safety Stats
    
    
      
        
          
April Daily
Stats
 

          
FY Goal %  

          
OIR  

          
Recordable Incidents  

          
PIT Incidents  

          
Total Incidents  

          
Days OIR Free  

        
      
      
        
          
          
           
        
        
           
          


          
           
        
        
           
          

  
        
        
           
          

  
        
        
           
          

  
        
        
           
          

  
        
        
           
          

  
        
      
    
                  Push instead of Pull

bub · Accepted Answer

You could use the input event listener to keep storing data to localStorage. Replace SOME_ELEMENT for whatever elements you want to use and SOME_DATA_KEY with your preferred localStorage key.

Edit: Use the input eventlistener

// Note: store your input element in a variable and replace SOME_ELEMENT with the variable
SOME_ELEMENT.addEventListener('input', function() {
    localStorage.setItem(SOME_DATA_KEY, SOME_ELEMENT.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
SOME_ELEMENT.value = localStorage.getItem(SOME_DATA_KEY);

Example (using a variable with ID of FY):

let FY = document.getElementById('FY');
FY.addEventListener('input', function() {
    localStorage.setItem('FY', FY.value);
})
FY.value = localStorage.getItem('FY');

Edit: Do not use beforeunload as it is not reliably fired.

~~You can also use a different event to write the element value to localStorage. For example, you could use beforeunload.~~

Save user Input using LocalStoarge in html table

Answers (1)

Related Questions