JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<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">Altura (cm)</label>
            <input id="alturaUsuario" type="range" name="sliderAltura" value="173" min="0" max="220" data-highlight="true">
        </div>
        <div data-role="fieldcontain">
            <label for="edadUsuario">Edad</label>
            <input id="edadUsuario" type="range" name="sliderEdad" value="24" min="0" max="70" data-highlight="true">
        </div>
        <input id="botonGuardarOpciones" type="submit" data-theme="a" data-icon="edit" data-iconpos="left" value="Guardar" data-mini="true">
    </div>
</div>

JavaScript

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

function guardarDatosOpciones() {
    alert("saving data");
    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    if (Modernizr.localstorage) {
        localStorage.setItem(localStorageKey1, $("#nombreUsuarioOpciones").val());
        localStorage.setItem(localStorageKey2, $("#pesoUsuario").val());
        localStorage.setItem(localStorageKey3, $("#alturaUsuario").val());
        localStorage.setItem(localStorageKey4, $("#edadUsuario").val());
        e.preventDefault();
    } else {
        alert("No se puede usar el LocalStorage");
    }
}

//THIS WILL LOAD WHEN PAGE IS READY
$(document).ready(mostrarValoresOpcionesGuardados);

function mostrarValoresOpcionesGuardados() {

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