Using localStorage.setItem() in details page

[Sander]

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?

 

[nightowl]

Hi Sander,

Here's the scenario. If the submission form has been visited before the Results page, localStorage would still be empty  then. Because at this stage, the script on the Results page has not been executed yet. However, if the Results page has been accessed first and the Store Data button has been clicked, the myFunction() function, which saves the title in localStorage, will now execute during form submission. If you access the submission form again, you can now see the text "Example" being displayed since  the title variable has already been saved in localStorage .

I tried using a Details page instead of a Results page to test the script behaviour. Fortunately, it worked. That's why I have been wondering why using the code on the Results page worked for you but not the script that was applied to the Details page.

Now, to have these scripting work properly regardless of your workflow or what page was accessed first, make sure that the myFunction() function is available to all app DataPages. Then you can do revise the script on the submission form, like this:

<script type="text/javascript">
var title = localStorage.getItem('title');
if ((typeof(title) !== 'undefined') && (title !== null)
{
    // title has already been saved in localStorage
    document.write(title);
}
else
{
    // title has not yet been saved in localStorage
    // TODO: Call myFunction() here to automatically save the title variable, just in case -->
    myFunction();
}
</script>

You can make the myFunction() function available on every DataPage in two ways. The easiest way is by copy-pasting that code on the header of the DataPage. That can be tedious, but it works. However, my recommended way is by putting that function inside an external JavaScript file, which we can name myfunction.js. This is very useful if the DataPages have been deployed using the HTML embed code, i.e. inside actual HTML files. In that case, you can include the file into the HTML page using this line of code:

<script type="text/javascript" src="https://YOUR_SITE_DOMAIN/js/myfunction.js"></script>

The code snippet above assumes that the  myfunction.js file resides in a js/ folder at the root of your site folder.

 

[Sander]

Firstly, thanks for putting your time and effort in answering my question  

I think I did not explain my problem clear enough, so I will try again. 

In the app i'm making customers can book a seat for a movie or theater performance, for this I use 3 datapages. 

1. A report page where customers can search for a genre, time or place. When they found their desired movie/theater performance they will go to the details page, here a hyperlink is displayed that brings them to the next datapage. Note: this is where i want the details of the movie to be saved in to the local storage. 

2. This page is also a report page and calculates the number of already booked seats, I filter on an ID I passed (parameter) from the details page, then with some javascript i calculate the number of records, this is a page invisible for the end-user; and autoredirects after calculating. Note: this is de results page i referenced to in my orginal post, this value is stored in localstorage. 

3. The user then ends up in the submission form where he can book a seat. Here is where I retrieve information from the localstorage. The problem occurs here, it is possible to retrieve and display the amount of booked seats but when I try to display the information about the movie it displays null. As a test I passed some other information from the results page (page 2) and this did work. 

U suggested I used the following script. 

<script type="text/javascript">
var title = localStorage.getItem('title');
if ((typeof(title) !== 'undefined') && (title !== null)
{
    // title has already been saved in localStorage
    document.write(title);
}
else
{
    // title has not yet been saved in localStorage
    // TODO: Call myFunction() here to automatically save the title variable, just in case -->
    myFunction();
}
</script>

Correct me if i'm wrong but it wouldn't be possible to execute the script from the submission form; since there is no information about the movie, right? 

I hope my problem is clear now, my excuses for not explaining it clearly in the first place.