Storing data for a while

Question

Is there any way using the javascript cookies that I can store information for 3 hours for example ?

In my scenario I need to have a warning page, but I don’t need to store these records in a database. I need these warnings to stay for at least 3 hours on the page after they expire.

Searching about javascript found this cookie. So, basically I wanted you to have a textarea with a button of Submit, and when the user writes the warning and clicks on the button, the content of the textarea appeared in a div and stay there for 3 hours.

But I have no idea how to do that and I don’t know if it’s viable.

*Remembering here that would be several warnings. That is, it may be that the day may have more than one warning, so I wanted to show them all, and according to the time they disappear (expire) from the page.

Could someone help me ? Is there any other way I can do this without having to create tables and have that time to expire ?

EDIT

I made a code here that works. But I wanted to adapt it to my scenario. I mean, the warning stays there for 3 hours and then expires.

<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>

Answer 1

You can use localStorage for this purpose, example:

Take the datetime and store it in a variable, enter it in the localstorage.

To set the value, use setItem.

var horas = '1 hora';

localStorage.setItem('aviso1', horas);

To get the value, use getItem

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

---

Edited with an example code:

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;
}

Take this create.