Existe alguma forma usando o javascript cookies que eu possa guardar uma informação por 3 horas por exemplo ?
Em meu cenário preciso ter uma página de avisos, mas não preciso guardar esses registros em banco de dados. Preciso que esses avisos fiquem por pelo menos 3 horas na página depois expire.
Buscando sobre javascript achei esse cookie. Então, basicamente eu queria que tivesse uma textarea com um botão de submit, e quando o usuário escrever o aviso e clicasse no botão, o conteúdo da textarea aparecesse em uma div e ficasse lá por 3 horas.
Mas não tenho ideia de como fazer isso e não sei se é viável.
*Lembrando aqui que seriam vários avisos. Ou seja, pode ser que no dia pode ter mais de um aviso, então queria mostrar todos, e de acordo com o tempo eles irem sumindo(expirando) da página.
Será que alguém poderia me ajudar ? Existe alguma outra forma que possa fazer isso, sem precisar criar tabelas e que tenha esse tempo para expirar ?
EDIT
Eu fiz um código aqui que funciona. Mas queria adaptar ele ao meu cenário. Ou seja, o aviso fica lá por 3 horas e depois expira.
<div class="row">
<h3>Digite o aviso</h3>
<form id="frmCadastro">
<textarea id="aviso" rows="10" cols="100"></textarea>
<br />
<input type="submit" value="Salvar" id="btnSalvar" class="btn btn-info btn-lg" />
</form>
</div>
<script>
$(function () {
var operacao = "A"; //"A"=Adição; "E"=Edição
var indice_selecionado = -1;
var tbClientes = localStorage.getItem("tbClientes");// Recupera os dados armazenados
tbClientes = JSON.parse(tbClientes); // Converte string para objeto
if (tbClientes == null) // Caso não haja conteúdo, iniciamos um vetor vazio
tbClientes = [];
function Adicionar() {
var cliente = JSON.stringify({
Aviso: $("#aviso").val(),
});
tbClientes.push(cliente);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
return true;
}
function Editar() {
tbClientes[indice_selecionado] = JSON.stringify({
Aviso: $("#aviso").val(),
});
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
operacao = "A";
return true;
}
function Listar() {
$("#tblListar").html("");
$("#tblListar").html(
"<thead>" +
"<tr>" +
"<th>Avisos</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"</tbody>"
);
for (var i in tbClientes) {
var cli = JSON.parse(tbClientes[i]);
$("#tblListar tbody").append("<tr>" +
" <td>" + cli.Aviso + "</td>" +
" <td><img src='Imagens/edit.png' alt='" + i + "' class='btnEditar'/><img src='Imagens/deleta.png' alt='" + i + "' class='btnExcluir'/></td>" +
"</tr>");
}
}
function Excluir() {
indice_selecionado = parseInt($(this).attr("alt"));
tbClientes.splice(indice_selecionado, 1);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Aviso excluído.");
}
function GetCliente(propriedade, valor) {
var cli = null;
for (var item in tbClientes) {
var i = JSON.parse(tbClientes[item]);
if (i[propriedade] == valor)
cli = i;
}
return cli;
}
Listar();
$("#frmCadastro").bind("submit", function () {
if (operacao == "A")
return Adicionar();
else
return Editar();
});
$(".btnEditar").bind("click", function () {
operacao = "E";
indice_selecionado = parseInt($(this).attr("alt"));
var cli = JSON.parse(tbClientes[indice_selecionado]);
$("#aviso").val(cli.Aviso);
$("#aviso").focus();
});
$(".btnExcluir").bind("click", function () {
indice_selecionado = parseInt($(this).attr("alt"));
Excluir();
Listar();
});
});
</script>
GET /avisos
só recebem os avisos recentes (e você descarta apropriadamente os avisos antigos). O problema de você não utilizar um BD é que no caso do seu servidor cair você perde as mensagens, e caso de você tenha um cluster você ainda vai precisar implementar uma logica para redistribuir os avisos entre seus servidores.localStorage
, somente com Javascript. "Considerar" pois, como dito por você "seriam vários avisos" e localStorage possui limite de armazenamento.