Saving new object in Local Storage, and get it in new session to render a table.

Question

So i have an input field where admin enters the name of a new Tag to be created on submit, and if it validates, it will create a new Tag object with the name and id, after it will render the table with all objects in the arrayTags. How can i save the objects and get them to render the table everytime i open the browser or go to another page?
Also i don't have enought space to post the refreshTableTags function here.
Thank you in advance!

let arrayTags = [];
window.onload = function () {
// ADD TAG
// VARIABLES
let strHtml = "";
let tblTags = document.getElementById("tblTags");
let addTag = document.getElementById("addTag");

// TEST
let newTag1 = new Tag("Aventura");
arrayTags.push(newTag1)
console.log(newTag1.nameTag)
refreshTableTags();

// ADD TAG EVENT
addTag.addEventListener("submit", function (event) {
event.preventDefault();
// 1. GET VALUES FROM HTML FILE
let inputTagName = document.getElementById("inputTagName");
let nameTag = inputTagName.value.charAt(0).toUpperCase() + inputTagName.value.slice(1);
let errorMsg = "";

// 2. VALIDATE INPUTS
for (let i = 0; i < arrayTags.length; i++) {
if(nameTag == arrayTags[i].nameTag){
errorMsg = "Tag já existe!";
}
}

if(inputTagName.value == ""){
errorMsg = "Tem de inserir o nome da tag!"
}

// 3.CHECK FOR ERRORS, IF NONE,CREATE NEW TAG AND PUSH TO ARRAYTAGS
if(errorMsg == ""){
let newTag = new Tag(nameTag);
arrayTags.push(newTag);
refreshTableTags();
inputTagName.value = "";
}
else{
alert(errorMsg);
}

})
}

Answer 1

from w3 schools

// Store
sessionStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

you can create a div container in which all created elements will go.
once the user editing is done, you can save all children elements inside the container as an array of objects and store it in a session storage variable.