Matheus, infelizmente não funcionou. Desenvolvi os códigos de outra forma e agora quando uso o F5 consigo obter os dados do input na view mas eles estão se comportando de forma estranha. Quando atualizo, os itens são exibidos, mas aparece: "[Object: object]" no lugar do conteúdo da propriedade do meu objeto.
Segue todo meu código a seguir:
"""! faço a observação que se o localStorage estiver vazio então vai dar erro no console, porque o método _getter() não consegue funcionar encima de "NULL", tendo isso em mente vou no console e mando um comando "localStorage.setItem("ficheiro", JSON.stringify([0,1]))".
Quando atualizo a pagina não da erro, aparece pra mim 0 e 1 na div minha pagina, porem quando eu uso o botão da pagina (método _cast()) o 0 e 1 viram [Object: object] e não consigo o resultado desejado. !""
class View {
constructor(elemento) {
this._elemento = elemento;
}
template() {
throw new Error('O método template deve ser implementado');
}
update(model) {
this._elemento.innerHTML = this.template(model);
}
}
class RegistroView extends View {
constructor(elemento) {
super(elemento);
}
template(model) {
return `
${model.ficheiro.map(n => `
<p>${n.registro}</p><br>
`)}
`
}
}
class Registro{
constructor(param){
this._registro= param;
}
get registro(){
return this._registro;
}
}
class ModeloDeRegistros {
constructor(){
this._ficheiro = [];
}
adicionaRegistro(obj) {
this._ficheiro.push(obj);
}
get ficheiro() {
return [].concat(this._ficheiro);
}
set ficheiro(fchr) {
this._ficheiro = fchr;
}
}
class Controller{
constructor(){
this._input = document.querySelector('#input');
this._modeloDeRegistros = new ModeloDeRegistros();
this._registroView = new RegistroView(document.querySelector('#mercurio'));
}
_setter(){
let string = this._modeloDeRegistros.ficheiro;
localStorage.setItem("ficheiro", JSON.stringify(string));
}
_getter(){
this._modeloDeRegistros._ficheiro = [];
JSON.parse(
localStorage.getItem("ficheiro"))
.map(objeto =>
new Registro(objeto))
.forEach(registro =>
this._modeloDeRegistros.adicionaRegistro(registro));
/*
this._modeloDeRegistros.ficheiro.push(
JSON.parse(JSON.stringify((localStorage.getItem("ficheiro")))));
*/
console.log(this._modeloDeRegistros.ficheiro);
}
_updater(){
this._registroView.update(this._modeloDeRegistros);
}
_cast(){
event.preventDefault(event);
this._getter();
this._modeloDeRegistros.adicionaRegistro(new Registro(
this._input.value
));
this._setter();
this._updater();
}
}
<html><head>
<style>
#registrar {
}
#container {
background-color: grey;
height: auto;
width: auto;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center
}
#container p input section{
margin: 0
}
h1 {
text-align: center;
}
</style>
</head><body>
<div id="container">
<br>
<form onsubmit="controller._cast(event)">
<input type="text" id="input">
<input type="submit" id="registrador">
</form>
<h1>REGISTRO</h1>
<section id="mercurio">
<p id="gmc">ground mark cardinal</p>
</section>
</div>
<script src="Registro.js"></script>
<script src="ModeloDeRegistros.js"></script>
<script src="View.js"></script>
<script src="RegistroView.js"></script>
<script src="Controller.js"></script>
<script>var controller= new Controller();</script>
<script>
/* let startReg = ["ground mark cardinal"];
localStorage.setItem("ficheiro",
JSON.stringify(startReg)); */
controller._getter();controller._updater();</script>
</body></html>
Apreciarei toda a ajuda pois nunca estive tão perto de desenvolver meu primeiro WPA.
Obrigado pela atenção...
