Search the Community

I am building a one-page Caspio submission (deployed by embed) form for clients to fill out. Viewable here: Test Form • WIM Tracking I want the data to save locally (without the user having to submit the form) in case they are kicked off their browser or leave and return to it later. I have read that I can use localStorage.setItem and localStorage.getItem. I have found a couple other posts, but they don't quite translate to what I am doing. I have included the posts I have found below and have based the following code on those posts. Any suggestions? <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { console.log("DataPageReady"); console.log(document.getElementById("CaspioForm")) fields = document.getElementById("First_Name") for (field of fields) { //Load stored data into that field and add a listener to store the data on change handleStorage(field) } //Instead of having to list }); //Handle loading/storing data for a field function handleStorage(field) { // Get value out ofstorage and populate the field with it console.log("Loading value " + localStorage.getItem(field.id) + " for field " + field.id); if (field.type == "checkbox") { //The storage is saving the boolean as a string, so we need to //convert it back to a boolean for checkboxes field.checked = (localStorage.getItem(field.id) == 'true'); } else { field.value = localStorage.getItem(field.id); } //Add a listener to store the data every time a field changes //This will fire every time they type a letter. field.addEventListener('input', (event) => { console.log(event); //Checkboxes store their value in "checked" instead of "value", //so you have to handle it separately. value = (event.target.type == "checkbox") ? event.target.checked : event.target.value; console.log("Storing " + value + " for " + event.target.id); //Store the the value for the id (The id should be unique, // so you might as well use it as your storage key as well) localStorage.setItem(event.target.id, value); }); } </script>

So I was exploring the functionalities of the localstorage function within javascript. I want to plass information between two webpages. When I save data from the results page and later call that information in a webform it works as desired. But, when i try to do so from a details page, it returns null everytime. I do the exact same thing in the details page as in the results page, but somehow the script does not get executed. In the footer of the details page i made a button: <script type="text/javascript"> function myFunction(){ localStorage.setItem('title','Example'); } </script> <button onclick="myFunction()">Store data</button> In the submission form I placed the following code in an html block: <script> var title = localStorage.getItem('title'); document.write(title); </script> The document write function displays null. When I save it on the results page it displays Example. Does anyone know to correctly execute the script?