How to save request data in sessionStorage or Cookies?

Question

I am developing a chat with Websocket and in it there is the list of users, when I click on a certain user starts a conversation only with that user, my question is the following: when clicking the user to start a new conversation a request is made that returns all my conversations with that user (using ajax()), if I click again on the list to start a new conversation with that same user, he again requests the messages. I would like to save the returned data to a Cookie or HTML5 Log so that if I click this user again to start a conversation I don’t need to make a request again.

ps.: Clicking a user to start a conversation adds an html() with the messages returned via ajax() from a PHP file in the div where the messages are. If I click start a conversation with another user I would like the procedure to be the same.

Code jQuery:

function add_janelas(id, nome){
    var nome_add = '<p class="nome-informacoes '+id+'" id="'+id+'">'+nome+'</p>';
    var content_msg = '<div id="jan_'+id+'" class="janela_conv '+id+'"></div>';
    $('.informacoes').html(nome_add);
    $('.message_box').html(content_msg);
}

$(document).ready(function(){
    var janelas = new Array();
    var users = new Array();
    var comecar = $(".comecar");

comecar.click(function(){

    users = [];
    var id = $(this).attr('id');
    var nome = $(this).attr('title');

    add_janelas(id, nome);

    $.ajax({
        type: 'POST',
        url: 'sys/chat.php',
        data: 'acao='+'atualizar'+'&id='+id,
        success: function(html){
            $(".janela_conv").html(html);
        }
    });

    });
});

PHP code (chat.php):

<?php
    session_start();
    include_once '../config.php';
    require_once ("../classes/BD.class.php");
    BD::conn();

    date_default_timezone_set('America/Sao_Paulo');

    $acao = $_POST['acao'];

    switch ($acao) {    
        case 'atualizar':
            $id = isset($_POST['id']) ? $_POST['id'] : '';

            $select = BD::conn()->prepare("SELECT * FROM mensagem WHERE id_de = ? AND id_para = ? OR id_de = ? AND id_para = ?");
            $select->execute(array($_SESSION['id_user'], $id, $id, $_SESSION['id_user']));

            $mensagem = '';
            while($fetch = $select->fetchObject()){
                $nome = BD::conn()->prepare("SELECT nome FROM usuarios WHERE id = ?");
                $nome->execute(array($fetch->id_de));
                $remetente = $nome->fetchObject();

                $mensagem .= "<div class='mensagem'><span class='user_name' nome=" . $remetente->nome . " style=''>" . $remetente->nome . "</span> : <pre><span class='user_messag'>" . $fetch->msg . "</span></pre></div>";

                echo $mensagem;
            }
        break;
    }
?>

Answer 1

You’ll have to record in localStorage the value you receive when you open the first time, when there is another click, you will check if the localStorage of this window already exists, if yes it shows this html instead of the html coming from php:

comecar.click(function(){

    users = [];
    var id = $(this).attr('id');
    var nome = $(this).attr('title');
    var locStorage = window.localStorage;
    var hasConvo = locStorage.getItem(nome);
    add_janelas(id, nome);
    if (!hasConvo) {
        $.ajax({
            type: 'POST',
            url: 'sys/chat.php',
            data: 'acao='+'atualizar'+'&id='+id,
            success: function(html){
                locStorage.setItem(nome,html);
                $(".janela_conv").html(html);
            }
        });
    }
    else {
        $('.janela_conv').html(hasConvo);
    }

});