JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="opciones">
            <div data-theme="a" data-role="header">
                <a data-role="button" data-inline="true" data-direction="reverse" data-theme="a" data-transition="flow"
                href="#principal" data-icon="home" data-iconpos="left" class="ui-btn-left">
                    Volver
                </a>
                <h3 id="nombreAplicacion">
                    Nombre Aplicacion
                </h3>
            </div>
            <div data-role="content">
                <h4 id="tituloOpciones">
                    Opciones
                </h4>
                <div data-role="fieldcontain">
                    <label for="nombreUsuario">
                        Nombre
                    </label>
                    <input id="nombreUsuarioOpciones" placeholder="ej: Juan Lopez" value=""
                    type="text" data-mini="true"/>
                </div>
                <div data-role="fieldcontain">
                    <label for="pesoUsuario">
                        Peso (kg)
                    </label>
                    <input id="pesoUsuario" type="range" name="pesoUsuario" value="95" min="0"
                    max="200" data-highlight="true"/>
                </div>
                <div data-role="fieldcontain">
                    <label for="alturaUsuario">
                  ...

JavaScript

$("body").on('click', "#botonGuardarOpciones", function(){
    guardarDatosOpciones();
});

function guardarDatosOpciones()
{
    alert("saving data");
    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    
        localStorage.setItem(localStorageKey1, $("#nombreUsuarioOpciones").val());
        localStorage.setItem(localStorageKey2, $("#pesoUsuario").val());
        localStorage.setItem(localStorageKey3, $("#alturaUsuario").val());
        localStorage.setItem(localStorageKey4, $("#edadUsuario").val());
}

//THIS WILL LOAD WHEN PAGE IS READY

$(document).on('pagebeforeshow', '#opciones', function(){ 
    mostrarValoresOpcionesGuardados()
});

//$(document).ready(mostrarValoresOpcionesGuardados());

function mostrarValoresOpcionesGuardados()
{
    
    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    var nombre = localStorage.getItem(localStorageKey1);
    var peso = localStorage.getItem(localStorageKey2);
    var altura = localStorage.getItem(localStorageKey3);
    var edad = localStorage.getItem(localStorageKey4);
    $("#nombreUsuarioOpciones").val(nombre);
    $("#pesoUsuario").val(peso).slider().slider("refresh");
    $("#alturaUsuario").val(altura);
    $("#edadUsuario").val(edad);
    alert(nombre+" "+peso+" "+altura+" "+edad);
};