En primer lugar, semánticamente es incorrecto poner la etiqueta <script></script>
fuera de la etiqueta <body></body>
o de la etiqueta <head></head>
, así que te recomiendo como extra, mover el bloque script
al final del bloque body
.
Tu código:
<body>
...
</body>
<script>
...
</script>
Semánticamente válido:
<body>
...
<script>
...
</script>
</body>
Al tener el script al final de body ya no necesitas llamar a $(document).ready(function(){...});
porque estás asegurando que el script se ejecute después de que toda la página haya cargado. Existen más formas de llamar al script, pero para tu caso es más que suficiente.
Quedará así:
<body id="body">
<button id="guardar">Guardar configuración de la página</button>
<button id="recuperar">Recuperar mis datos guardados</button>
<script>
$('#guardar').click(function(){
var body = document.getElementById("body");
localStorage.setItem("obtener", body);
});
$('#recuperar').click(function(){
var obtener = localStorage.getItem("Obtener");
document.getElementById("obtener").innerHTML = obtener;
});
</script>
Luego de arreglar eso, el problema principal radica en que localStorage
únicamente acepta texto y tú estás intentando guardar un objeto(HTMLBodyElement).
var body = document.getElementById("body");
localStorage.setItem("obtener", body);
Aunque Javascript intentará convertir el objeto a texto, es imposible en este caso. Necesitas guardar toda esa información en otra estructura y la implementación dependerá de cómo registres esos datos, normalmente con un formulario.
Supongamos que tienes el siguiente formulario:
<form id="formulario">
<input type="text" name="color">
<input type="text" name="letra">
</form>
Al dar clic en tu botón de guardar, cargarás la información en esos campos y los guardarás en un objeto literal de javascript que después convertirás en texto usando JSON.stringify().
$("#guardar").click(function() {
var formulario = document.getElementById("formulario");
var datos = {
color: formulario.elements["color"].value,
letra: formulario.elements["letra"].value
};
localStorage.setItem("obtener", JSON.stringify(datos));
});
Esto te va a guardar en localStorage una representación del objeto como texto asociado al valor obtener
:
'{"color":"negro","letra":"arial"}'
Ahora para recuperar los datos, necesitas revertir el proceso convirtiendo la cadena de texto en un objeto literal. Para ello usarás JSON.parse(). Una vez que tengas los datos en un objeto, puedes asignar los valores a los campos del formulario al que pertenecen. (Puedes validar que funciona borrando el valor de los campos antes de presionar el botón de recuperar datos o recargando la página) Ojo: al llamar a localStorage.getItem()
necesitas escribir el nombre del campo exactamente como lo llamaste en setItem: respeta mayúsculas y minúsculas.
$("#recuperar").click(function() {
var datos = JSON.parse(localStorage.getItem("obtener"));
var formulario = document.getElementById("formulario");
formulario.elements["color"].value = datos["color"];
formulario.elements["letra"].value = datos["letra"];
});
En resumen:
No puedes simplemente tomar tu HTML y guardarlo en localStorage, sino, los valores que registras por medio de un formulario (u otra fuente) los guardas en un objeto literal que posteriormente conviertes a cadena de texto. Al sacarlos de localStorage, inviertes el proceso y los regresas a un objeto para que puedas tomar los datos y mostrarlos en tu aplicación.
<body>
<form id="formulario">
<input type="text" name="color" />
<input type="text" name="letra" />
</form>
<button id="guardar">Guardar configuración de la página</button>
<button id="recuperar">Recuperar mis datos guardados</button>
<script>
$("#guardar").click(function() {
var formulario = document.getElementById("formulario");
var datos = {
color: formulario.elements["color"].value,
letra: formulario.elements["letra"].value
};
localStorage.setItem("obtener", JSON.stringify(datos));
});
$("#recuperar").click(function() {
var datos = JSON.parse(localStorage.getItem("obtener"));
var formulario = document.getElementById("formulario");
formulario.elements["color"].value = datos["color"];
formulario.elements["letra"].value = datos["letra"];
});
</script>
</body>
No olvides cargar JQuery antes del script mostrado arriba o ¡nunca va a funcionar! También puedes optimizar la forma de obtener y mostrar los datos en el formulario, en este caso son sólo dos campos pero si tienes un formulario de 10 o 20 campos, guardar manualmente todos los valores no es lo ideal, intenta refactorizarlo usando ciclos. ¡Suerte!