I have some settings on the whole page that can be saved (colors, font, shopping cart, user edits etc...) but the script doesn't want to work for me and I don't know why, I need to make this work, since I've It took many months creating the website
<body id="body">
<button id="guardar">Guardar configuración de la página</button>
<button id="recuperar">Recuperar mis datos guardados</button>
</body>
<script>
$(document).ready(function(){
$('#guardar').click(function(){
var body = document.getElementById("body");
localStorage.setItem("obtener", body);
});
});
$(document).ready(function(){
$('#recuperar').click(function(){
var obtener = localStorage.getItem("Obtener");
document.getElementById("obtener").innerHTML = obtener;
});
});
</script>
First of all, it is semantically wrong to put the tag
<script></script>
outside the tag<body></body>
or the tag<head></head>
, so I recommend as a bonus, move the blockscript
to the end of the blockbody
.Your code:
Semantically valid:
By having the script at the end of body you no longer need to call
$(document).ready(function(){...});
because you are ensuring that the script is executed after the entire page has loaded. There are more ways to call the script, but for your case it is more than enough.It will look like this:
After fixing that, the main problem is that it
localStorage
only accepts text and you are trying to save an object(HTMLBodyElement).Although Javascript will try to convert the object to text, it is impossible in this case. You need to store all that information in another structure and the implementation will depend on how you register that data, usually with a form.
Suppose you have the following form:
By clicking your save button, you'll load the information in those fields and save them to a javascript literal object that you'll then convert to text using JSON.stringify().
This will save in localStorage a representation of the object as text associated with the value
obtener
:Now to retrieve the data, you need to reverse the process by converting the text string to an object literal. To do this you will use JSON.parse(). Once you have the data in an object, you can assign the values to the form fields they belong to. (You can validate that it works by deleting the value of the fields before pressing the retrieve data button or by reloading the page) Note: when calling you
localStorage.getItem()
need to write the name of the field exactly as you called it in setItem: it is case sensitive.In summary:
You can't just take your HTML and store it in localStorage, rather, the values you enter via a form (or other source) are stored in an object literal that you later convert to a string. Pulling them out of localStorage reverses the process and returns them to an object so you can grab the data and display it in your app.
Don't forget to load JQuery before the above script or it will never work! You can also optimize the way of getting and displaying the data in the form, in this case it is only two fields but if you have a form with 10 or 20 fields, manually saving all the values is not ideal, try to refactor it using cycles. Luck!
I hope I can help you. Note that localStorage is "case sensitive", meaning that you create a variable in local storage called "get"
localStorage.setItem("obtener", body);
Note that the variable is called "get" (lowercase)
Then when trying to extract its value you call it with a capital letter
The correct thing should be "get" (lowercase)