Codepen:
Codepen example: Dynamic content using local storage
This is a code example. There are three buttons which add a new bookmark to your local storage. The fourth button clears the storage.
The bookmarks are listed in the table dynamically.
After clicking a button the function addData is called. This function adds the new bookmark to the local storage. After that, this function calls another function updateTable. updateTable updates the table content (element with the id content).
For this purpose it iterates through the bookmark array and calls addTableRow which adds a new table row to the table body for all bookmarks.
Please notice: In this solution I cleared the table content when adding a new bookmark to the local storage. But this depends on your specific needs. You could also simply append the new added bookmark to the table instead of deleting the old content and redraw the complete bookmark array.
HTML:
<button onclick="button1()">Add bookmark 1</button>
<button onclick="button2()">Add bookmark 2</button>
<button onclick="button3()">Add bookmark 3</button>
<button onclick="clearLocalStorage()">Clear local storage</button>
<table>
<thead>
<tr>
<td>Created</td>
<td>Link</td>
<td>Title</td>
</tr>
</thead>
<tbody id="content">
<!-- Dynamic content -->
</tbody>
</table>
CSS:
table{
margin-top: 40px;
background: #dedede;
}
td{
min-width: 100px;
}
thead > tr > td{
font-weight: bold;
}
JS:
function button1(){
addData('01.01.1980', 'my-page.com', 'My page');
}
function button2(){
addData('03.09.1990', 'your-page.com', 'Your page');
}
function button3(){
addData('04.11.2010', 'our-page.com', 'Our page');
}
function clearLocalStorage(){
localStorage.setItem("bookmarks", JSON.stringify([]));
updateTable();
}
function addData(created, link, title){
// Get bookmarks
let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
// When this object do not exist, create a new array
if(bookmarks === undefined || bookmarks === null) bookmarks = new Array();
console.log(bookmarks);
bookmarks.push({created, link, title});
// Save the new bookmark in the local storage
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
// Update the table which displays the bookmarks
updateTable();
}
function updateTable(){
// Get all bookmarks of the local storage
let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
console.log(bookmarks);
// Get the DOM element which displays the bookmarks dynamically
let content = document.getElementById('content');
// Delete the current content
content.innerHTML = '';
// Iterate through the bookmark array and call the function
// "addTableRow" for alle element in the array.
bookmarks.forEach(bookmark => {
addTableRow(content, bookmark);
});
}
function addTableRow(content, data){
// Create a new table row
let newRow = document.createElement('tr');
// Create new table cells
let created = document.createElement('td');
created.innerHTML = data.created;
let link = document.createElement('td');
link.innerHTML = data.link;
let title = document.createElement('td');
title.innerHTML = data.title;
// Append the table cells to the row
newRow.appendChild(created);
newRow.appendChild(link);
newRow.appendChild(title);
// Append the table row to the content
content.appendChild(newRow);
}
