If your application is totally web I recommend you use Local Storage, it is very easy to use and can solve your problem.
LocalStorage and sessionStorage are HTML5 properties (web storage), which allow you to store data in our web browser similar to cookies.
Local Storage stores information that will remain stored indefinitely, regardless of whether the browser is closed.
Session Storage stores the data of a session and these are deleted when the browser is closed.
Advantages:
- Allow to store between 5MB and 10MB of information (text and / or multimedia)
--The information is stored on the client's device
-NOT is sent in each request of the server, unlike cookies
-Use a minimum of requests to the server to reduce network traffic
-Prevent information loss when you disconnect from the network
- The information is stored by web domain
/*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){
$('#boton-guardar').click(function(){
/*Captura de datos escrito en los inputs*/
var nom = document.getElementById("nombretxt").value;
var apel = document.getElementById("apellidotxt").value;
/*Guardando los datos en el LocalStorage*/
localStorage.setItem("Nombre", nom);
localStorage.setItem("Apellido", apel);
/*Limpiando los campos o inputs*/
document.getElementById("nombretxt").value = "";
document.getElementById("apellidotxt").value = "";
});
});
/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){
$('#boton-cargar').click(function(){
/*Obtener datos almacenados*/
var nombre = localStorage.getItem("Nombre");
var apellido = localStorage.getItem("Apellido");
/*Mostrar datos almacenados*/
document.getElementById("nombre").innerHTML = nombre;
document.getElementById("apellido").innerHTML = apellido;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<center><h1>Ejemplo - localStorage</h1>
<input type="text" placeholder="Nombre" id="nombretxt"> <br> <br>
<input type="text" placeholder="Apellido" id="apellidotxt"><br> <br>
<button id="boton-guardar">Guardar</button><br>
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label><br>
Apellido almacenado:
<label "text" id="apellido"></label><br>
<button id="boton-cargar">
Cargar elementos
</button>
</center>