How to retrieve and display local storage data dynamically in HTML page?-CodePudding

I want to display data dynamically from local storage into an HTML table using JavaScript. Can anyone help with a js code? Here is the sample HTML code

table, th, td {
  border:1px solid black;
}

<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  
</table>



</body>

CodePudding user response：

You need to retrieve the data from localStorage on the initial page load, and then every time you do any data manipulation within the table (insert, edit or delete stuff), run the same function essentially to repopulate the rows within the table. Depending on how you've structured your data, this should be very easy to implement, as it's literally a single loop that you need to execute.

CodePudding user response：

here is how i have structured it

//js file 1 

 var a, model_a = {
    meta:{
        id: -9799,
        publish: 'draft',
        created_on: '',
        user_id:'',
        user_name:'',
        get_id_url:'',
        save_url:'',
        type_data:'a',
    },
    organization:{
        report:{
            company:'',
            contact:'',
            country
        }
       
        
    },

//js file 2

  fire('a_create_user_input');

    $('#org_next').on('click',function (evt){
    
       
        var tmp_user_input = take_all_inputs_value();
   
        // console.log('', tmp_user_input);
        if(_.isEmpty(tmp_user_input) === false 
        
        ){
          
            a.organization.report.company = tmp_user_input.company_name; 
            a.organization.report.contact = tmp_user_input.contact;

           a.organization.report.country = tmp_user_input.country_name;
         

            window.location.hash = '';



        }else{
             console.error('some error');
        }
        });