'How to store a user-filled HTML table in local storage and then display it in a different results HTML page?

Summary of my program:

  1. Users fill out a HTML table (I'm not having problems with this step) in table.HTML page
  2. HTML table is stored in localStorage (using .SET on table.innerHTML)
  3. HTML table is displayed (using .GET) in a different results.HTML page

My attempt is below:

(INSIDE TABLE.HTML PAGE) HTML TABLE DESIGN

<div id="table-scroll">
<table class="content_table" double; id="tableStyle">
            <thead>
                <tr>
                    <th>Criteria</th>
                    <th>✅</th>
                    <th>❌</th>
                </tr>
             </thead>
    
            <tbody style="max-height: 50px; overflow-y: auto">
    
            <tr class="colspan_content">
                <td colspan="3">Details</td>
            </tr>
    
            <tr id="user_name">
                <td>Name</td>
                <td></td>
                <td>❌</td>
            </tr>
    
            <tr id="user_height">
                <td>Height</td>
                <td></td>
                <td>❌</td>
            </tr>
    
            <tr id="user_favourite_colour">
                <td>Colour</td>
                <td></td>
                <td>❌</td>
            </tr>
    
            <tr id="user_age">
                <td>Age</td>
                <td></td>
                <td>❌</td>
            </tr>
</tbody>
</table>
</div>

(INSIDE TABLE.HTML PAGE) BUTTON WHICH, ON CLICK, WILL SAVE THE HTML DATA IN LOCAL STORAGE AND ADD IT TO THE RESULTS HTML PAGE

    <button id="save_table" type="button">Click to save HTML data</button>

(INSIDE RESULTS.HTML PAGE) RESULTS.HTML PAGE WHICH I WANT THE TABLE DATA FROM LOCAL STORAGE (FROM TABLE.HTML) TO BE ADDED TO

<body>

    <p id="show_table_data"></p> //JS function saveTableData() used to display table here
    
</body>

JS FILE USING LOCALSTORAGE .GET and .SET

function saveTableData() {
    localStorage.setItem('table', document.getElementById('table-scroll').innerHTML);

    document.getElementById("show_table_data").innerHTML = localStorage.getItem("table-scroll");
}

window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('save_table').addEventListener("click", () => {
            saveTableData();
        });
      });

I've tried using the div element's .innerHTML attribute to try and store the table data in LocalStorage and subsequently display the table data from LocalStorage in a separate HTML page, but can't seem to get it to work! Any suggestions would be much appreciated :)

EDIT WITH BOTH FUNCTIONS:

function saveTableData() {
    localStorage.setItem('table', document.getElementById('table-scroll').innerHTML);

}

function loadTableData() {
    document.getElementById("show_table_data").innerHTML = localStorage.getItem("table");
}

window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('save_table').addEventListener("click", () => {
            saveTableData();
        });
      });

      window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('save_table').addEventListener("click", () => {
            loadTableData();
        });
      });

Error I'm receiving: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at loadTableData (script1.js:1138:58) at HTMLButtonElement. (script1.js:1149:13)

javascripthtmlhtml-tablelocal-storage


Solution 1:[1]

  1. you have non-matching keys when you store table in local storage and when you query it:

storing:

    localStorage.setItem('table', document.getElementById('table-scroll').innerHTML); // key is 'table'

retrieving:


    document.getElementById("show_table_data").innerHTML = localStorage.getItem("table-scroll"); // key is 'table-scroll'
  1. you use the same function saveTableData to both store and retrieve the data on different pages. Current implementation can work on the first page (will store the data) but then will probably throw an error because documetn.getElementById('show_table_datad') will return undefined (there is no such table in TABLE.HTML. On RESULTS.HTML this function won't be able to work because:
    1. there is no trigger for it.
    2. it should throw an error on document.getElementById('table-scroll') because this table exists on a different page.

You should split this into two functions: saveTableData and loadTableData.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 purple

Related Questions