Cómo usar los datos del almacenamiento local en javascript onClick. Tengo mi archivo html y el archivo javascript a continuación. Gracias
<fieldset> <form> <!--GET USER NAME--> <p> <label for="inName" >What is your name?</label> <input type="text" id="inName" name="f_name"/> </p> <!-- GET COLOUR--> // I m not sure about how the get color as user can //choose the color from drop down color palet. <p> <label for="inColor" >What is your favourite colour? </label> <input type="color" id="inColor" name="f_color" /> </p> <p> // how to get the value when user clicks the button // in order to call onClick function to output the user's name and // display favorite color in background. <input type="submit" value="Click to save" /> <p/> </fieldset> </form>No sé cómo obtener datos del almacenamiento local cuando el usuario hace clic para enviar el formulario:
//NOW THAT WE HAVE STORED DATA ON ONE PAGE, WE CAN ACCESS IT FROM ANY PAGE ON THIS WEBSITE. window.onload = function(){ //GET ELEMENTS USED FOR OUTPUT var userOut = document.getElementById("newMsgBox"); //GET VALUES FROM COOKIES/LOCAL STORAGE var userName = localStorage.getItem("nameIn"); var userColor = localStorage.getItem("inColor"); //CREATE OUTPUT WITH VALUES if (userName !== null) { userOut.innerHTML = " " +userName; } }//end onloadSi desea escuchar el evento desde un botón específico y luego acceder a su almacenamiento local, puede hacer esto:
primero obtener el elemento:
const button = document.getElementById('<clickable_element_id>');luego agregue un oyente al botón;
button.addEventListener("click",(event)=> { event.preventDefault() // only if you want to prevent the action //here you can access to your local store items like: const a = localStorage.getItem("<item you saved previously>"); ... });No está muy claro lo que quieres hacer, pero
let inColor = document.getElementById('inColor'); let inName = document.getElementById('inColor');Obtendrá los valores para usted. Creo que estás buscando algo como esto.
<script> function saveData() { let inColor = document.getElementById('inColor'); let inName = document.getElementById('inName'); localStorage.setItem("inColor", inColor); localStorage.setItem("inName", inName); } </script> <input type="Button" value="Click to save" onclick="saveData"/>Importe Jquery y use esto. Espero ayudarte. cuando hace clic en el botón con id idOfBtn jquery va a expulsar el evento y llamar al localStorage con clave ( clave ). Reemplácelo por su nombre clave.
$("#idOfBtn").click(function() { alert(localStorage.getItem('_key_')); });