Menu one page como manter na mesma tag mesmo atualizando a página

[Sapinn 0]

Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.

Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs

Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu

ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.

[Electronic 124]

Precisa guardar a informação de qual botão está ativo com cookie ou localStorage

salvar localStorage.setItem('nome',valor')

recuperar localStorage.getItem(nome);

 

pra identificar o botão selecionado, adicione o atributo data-index em cada tag com a numeração para distinguir 

<button data-index="1" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button data-index="2" class="tablinks" ..... Assim por diate

 

Então no final da função openCity coloque essa linha, ela vai guardar qual botão foi pressionado por ultimo.

 localStorage.setItem('selecionado', evt.currentTarget.getAttribute('data-index'))

 

Fora da função coloque esse IF. 
   Vê se tem um localStorage selecionado, se tem clique no elemento que tem o atributo data-index como mesmo valor que esta guardado. Se não tiver clique no botão padrão com id defaultOpen 

if (localStorage.getItem('selecionado') !== null) {
  document.querySelector('[data-index="' + localStorage.getItem('selecionado') + '"]').click();
} else {
  document.getElementById("defaultOpen").click();
}

 

 

[Sapinn 0]

Opa, valeu!