Display Local Storage Array Using Rows & Columns with CSS Grid or Flexbox (Not Tables)

[jaysonwonder]

I am new to JavaScript but I have figured out how to get data into local storage. My challenge now is to get it out in an clean and modern way. I figure I will need to loop through the array / object so I can show each entry as a row with columns. For example:

Header) First Name | Last Name | Age | City | Sex
Entry 1) John | Doe | 33 | New York | Male
Entry 2) Sue| Smith| 54 | Halifax | Female
Entry 3) Kirk | Jackson | 24 | Toronto | Male

I want to use CSS to format the layout of the so called “Table” but I want my code to be modern using CSS Grid or Flexbox not the older table, th, tr, td tags. Is there a function, library or simple approach to doing what seems like a very common task using vanilla JavaScript?

I think I need to use createElement or innerHTML but I am not sure how to make the

with classes using this approach. Any help or guidance is appreciated.

Thanks you,

[PaulOB]

@jaysonwonder

not the older table, th, tr, td tags

Can’t help with the JS but from the data you present above the html should semantically be presented using the table, th and td tags etc. Any other tags would be a hack.

You can still use grid and flexbox on the table tags if you wanted but there probably is no need as tables and cells will format nicely automatically.

Table tags are not deprecated and are the recommended tags for displaying data.

[m_hutley]

Present tabular data with tables.

The Javascript is just the reverse of how you got it in there. Whichever sort of storage you used .setItem on, you use .getItem to get it back.