[Dúvida] como puxar os dados da local storage e mante -los na minha tabela | JavaScript

o codigo ele pega os dados da pessoa porem ao atualizar ele se perde ,tem de se lembrar que perde na tabela que está na pagina e nnão na localStorage

const graduacao= document.querySelector('#grad')
const nome = document.querySelector('#name')
const idmil = document.querySelector('#idmil')
const om = document.querySelector('#origem')
const ramal = document.querySelector('#phone')
const btn=document.querySelector('.btnCadastro')
const form =document.querySelector('#cadastroForm')
const tabela  = document.querySelector('#tabela')
const horario= new Date().toLocaleDateString()




const graduacaoValor=graduacao.value
const nomeValor=nome.value
const idmilValor=idmil.value
const omValor =om.value
const ramalValor= ramal.value

form.addEventListener('submit',(event)=>{
    event.preventDefault()
    

                insereLinha()
                guardarDados()
                mantemDados()
                    return
            }
        
        )
//essa função guarda todos os dados na local Storage


function guardarDados(){

    let pessoas = JSON.parse(localStorage.getItem('pessoas'))|| [];
    const novaPessoa={
       graduacao:graduacaoValor,
       nome:nomeValor,
       idmil:idmilValor,
       om:omValor,
       ramal:ramalValor,
       horario:horario }
   
       pessoas.push(novaPessoa)
       localStorage.setItem('pessoas',JSON.stringify(pessoas))
       

}
function insereLinha(){
        
    var linha=tabela.insertRow(-1);//adiciona uma linha à tabela
    var coll=linha.insertCell(0)
    var coll1=linha.insertCell(1)
    var coll2=linha.insertCell(2)
    var coll3=linha.insertCell(3)
    var coll4=linha.insertCell(4)
    var coll5=linha.insertCell(5)

        coll.textContent=graduacao.value
        coll1.textContent=nome.value
        coll2.textContent=idmil.value
        coll3.textContent=om.value
        coll4.textContent=ramal.value
        coll5.textContent=horario
        // limpa o formulário após adicionar a linha
        form.reset()
            }
            
            function mantemDados(){
                let pessoas =JSON.parse(localStorage.getItem(pessoas))||[]
                pessoas.forEach(pessoa=>{
                    const { nome, idmilitar, om, celular, horario } = pessoa;
                 insereLinha()}

Oii, tudo bem?

Seria bom ver o código completo, mas identifiquei dois pontos para ajustar:

Problema com a função mantemDados:
- A variável pessoas está sendo chamada sem aspas na função getItem. Corrija essa linha para:
```
let pessoas = JSON.parse(localStorage.getItem('pessoas')) || [];
```
Inserção das linhas na tabela ao carregar a página:
- Para que os dados persistam ao atualizar a página, você precisa garantir que a função mantemDados seja chamada ao carregar a página, inserindo as linhas na tabela a partir do localStorage. Inclua o código abaixo:
```
window.onload = mantemDados;
```

Com essas correções, os dados armazenados no localStorage devem ser carregados na tabela sempre que a página for recarregada.

Código completo:

const graduacao = document.querySelector("#grad");
const nome = document.querySelector("#name");
const idmil = document.querySelector("#idmil");
const om = document.querySelector("#origem");
const ramal = document.querySelector("#phone");
const btn = document.querySelector(".btnCadastro");
const form = document.querySelector("#cadastroForm");
const tabela = document.querySelector("#tabela");
const horario = new Date().toLocaleDateString();

form.addEventListener("submit", (event) => {
  event.preventDefault();

  insereLinha();
  guardarDados();
  form.reset(); // Limpa o formulário após a submissão
});

// Função para guardar dados na localStorage
function guardarDados() {
  let pessoas = JSON.parse(localStorage.getItem("pessoas")) || [];
  const novaPessoa = {
    graduacao: graduacao.value,
    nome: nome.value,
    idmil: idmil.value,
    om: om.value,
    ramal: ramal.value,
    horario: horario
  };

  pessoas.push(novaPessoa);
  localStorage.setItem("pessoas", JSON.stringify(pessoas));
}

// Função para inserir linha na tabela
function insereLinha(pessoa = null) {
  var linha = tabela.insertRow(-1); // Adiciona uma linha à tabela
  var coll = linha.insertCell(0);
  var coll1 = linha.insertCell(1);
  var coll2 = linha.insertCell(2);
  var coll3 = linha.insertCell(3);
  var coll4 = linha.insertCell(4);
  var coll5 = linha.insertCell(5);

  // Se a função for chamada com dados (pessoa), usa-os, senão, usa os valores do formulário
  coll.textContent = pessoa ? pessoa.graduacao : graduacao.value;
  coll1.textContent = pessoa ? pessoa.nome : nome.value;
  coll2.textContent = pessoa ? pessoa.idmil : idmil.value;
  coll3.textContent = pessoa ? pessoa.om : om.value;
  coll4.textContent = pessoa ? pessoa.ramal : ramal.value;
  coll5.textContent = pessoa ? pessoa.horario : horario;
}

// Função para manter dados da localStorage na tabela
function mantemDados() {
  let pessoas = JSON.parse(localStorage.getItem("pessoas")) || [];
  pessoas.forEach((pessoa) => {
    insereLinha(pessoa); // Insere cada pessoa na tabela
  });
}

// Carrega os dados quando a página for recarregada
window.onload = mantemDados;

Um abraço e bons estudos.