2

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>
11
  • 1
    O problema dos cookies é que eles são individuais por cliente, não que você precise de banco de dados mas você vai precisar de alguma logica server side para redistribuir a informação. 18/12/2014 às 17:34
  • Existe alguma outra forma, além do javascript que eu possa fazer isso ? 18/12/2014 às 17:35
  • 1
    Ué, você pode mandar o aviso para o seu backend que guarda na memória junto com a data e hora que o aviso foi recebido, todas as pessoas solicitando os avisos, pro exemplo em 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. 18/12/2014 às 17:40
  • 1
    Então vou adicionar a tag do asp.net mvc. Talvez assim eu consiga uma reposta esclarecedora né ? 18/12/2014 às 17:46
  • 1
    Você pode considerar armazenar essas informações por meio da API localStorage, somente com Javascript. "Considerar" pois, como dito por você "seriam vários avisos" e localStorage possui limite de armazenamento. 18/12/2014 às 18:00

1 Resposta 1

0

Você pode usar o localStorage para essa finalidade, exemplo:

Pegue o datetime e armazene numa variavel, insirá ela no localstorage.

Para setar o valor, use setItem.

var horas = '1 hora';

localStorage.setItem('aviso1', horas);

Para pegar o valor, use getItem

localStorage.getItem('aviso1');
result: '1 hora'

Editado com um código exemplo:

function criarAviso(){
 //pega o horario atual
 var data = new Date().getHours();
 //adiciona mais 3 horas 
 var aviso = data + 3;

 //setou o aviso
 localStorage.setItem('aviso 1', aviso);

}

//pega a hora atual
var dataagora = new Date().getHours();

//pega o aviso
var verificar = localStorage.getItem('aviso 1');

//faz o parse para número
verificar = parseInt(verificar);

//compara o horario
if(verificar <= dataagora){
  //cria a ação para o usuario;
}

Pega esse criarAviso e adiciona na ação do botão.

9
  • Eu entendi, mas como posso usar o localSotrage em uma página razor ? Como eu posso jogar esse valor e pegar e mostrar em uma página html ? Se possível ? 24/12/2014 às 17:44
  • É possivel renderizar páginas com alguns scripts js? 24/12/2014 às 18:04
  • Sim sim, sem problemas. Eu preciso guardar esse aviso durante algumas horas. Se com scripts funcionar, ta ótimo ! 24/12/2014 às 18:06
  • Certo, você precisa pegar a data atual do browser pra armazenar no storage, e fazer comparação pra cada atualização do usuário, se o valor que foi armazenado continua sendo maior que o atual. Não existe um worker que trabalha em background no browser para excluir esses dados. Voce pode verificar, caso passe do horário, avisar o usuário e excluir esse aviso 24/12/2014 às 18:14
  • Poderia colocar em código ? 24/12/2014 às 18:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .