I'm studying front-end development and I'm trying to make a social network webpage to share source codes using html, css, javascript, highlight.js (to apply different colors for the tags) and the localStorage to save the project attributes from the code editor homepage and load these data in a card into the community page.
Well, to save the project i wrote this code in the index.js
const btnSalvar = document.getElementById('salvarProjeto')
const tituloDoProjeto = document.getElementById('nomeDoProjeto')
const descricaoDoProjeto = document.getElementById('descricaoDoProjeto')
btnSalvar.addEventListener('click', () => {
if (typeof(storage) !== "undefined") {
console.log('suporta o localstorage')
const projeto = montaProjeto()
salvaLocalStorage(projeto)
} else {
console.log('não suporta o localstorage')
}
})
function montaProjeto() {
/*
adicionar na matriz a mudança de cor da borda
*/
let projeto = {
'id': atribuiId(),
'detalhesDoProjeto': {
'nomeDoProjeto': tituloDoProjeto.value,
'descricaoDoProjeto': descricaoDoProjeto.value,
'linguagem': linguagem.value,
'codigo': areaDoCodigo.querySelector('code').innerText
}
}
return projeto
}
let numeroId = 1
if (localStorage.length > 0) {
numeroId = localStorage.length
}
function atribuiId(){
if (localStorage.length == 0) {
return 0
} else {
if (localStorage.length == numeroId) {
let novoId = numeroId
numeroId++
return novoId
}
}
}
function salvaLocalStorage(objetoJson){
localStorage.setItem(objetoJson.id, JSON.stringfy(objetoJson))
}
When I tried to run the script in the code editor page, the browser console told me that it doesn't support local storage, so what would be the best alternative to replace local storage: cache storage, indexedDB or use database?
And why the browser does not support the local storage?
Thanks for the attention fellows!