Storyline 3 and the use of localStorage in different browsers

Sorry for what is about to be a long winded post, but I figure the more detail you have the better.

Firstly, I should point out I am not a programmer, but am not afraid to try and play around copying bits of code here and there and, as you’ll see, what I am trying to achieve works in at least one browser, so here it is.

I'm trying to use user names throughout a course I am currently building. Ah, easy you might say, but the course is anticipated to be so large that it has had to split over a number of different .story files, which are as followed:

1.       Landing page.

2.       Menu page.

3.       Course Part A.

4.       Course Part B.

5.       Course Part C.

6.       Course Part D.

7.       Course Part……etc

On entering the Landing Page, the user puts in their forename and surname, which are saved as text variables, ‘user_forename’ and ‘user_surname’. These have been combined into a single text variable ‘learnername’. The reason for this is that the course can address the user informally using their forename, but when generating certificates, at the end of each Course Part, can use the variable ‘learnername’ to generate the name displayed on the certificate. All three variables are, therefore, intended to be carried across to each of the other published .story files using the localStorage inside the browser. So, when the user clicks a continue button on the published Landing Page, after first filling in their first and last name, they are hyperlinked to the Menu page (separate published .story file), where they are informally welcomed (%user_forename%) and asked to select one of the courses to complete. On selecting the required course, say Course Part A, they are then hyperlinked to the appropriate published .story file. Again the three variables are carried across in localStorage. On completing the course, a certificate is generated for that part of the course and they are then returned to the published Menu page, this way, they only ever have to put their name in once (assuming they don’t close the browser and lose the localStorage data).

So here is my problem. I can get the localStorage to work in some browsers, but not in others as follows:

Browser Table

(1)    Local Storage values visible on Landing page, when viewed using developer tools (Shift + F9), but are not carried across when the hyperlink is activated and hence not to any of the other published .story files.

(2)    Doesn’t appear to save the localStorage values when viewed using developer tools (F12), at least not under Storage>local Storage

(3)     Doesn’t appear to save the localStorage values when viewed using developer tools (F12), localStorage, when typed in at the bottom of the Console page, returns localStorage (blue text) undefined (green text). It did however display ‘actionator::exeJavaScript - Unable to get property 'getItem' of undefined or null reference’ in the DOM Explorer, which I think might refer to one of the javascript calls, when trying to retrieve the localStorage data (see javascript snipets below).

Versions used:

Chrome                  Version 78.0.3904.108 (Official Build) (64-bit)
Firefox                   71.0 (64-bit)
Edge                       Microsoft Edge 44.18362.449.0
                                Microsoft EdgeHTML 18.18362
Int Explorer           Version: 11.475.18362.0

The javascript used is as follows:

On the landing page –

//Combine fore and surnames to get full learnername

var player = GetPlayer();

var a= player.GetVar("user_forename");

var b= player.GetVar("user_surname");

var c= a+" "+b;

player.SetVar("learnername",c);

 

//Export to Browser Local Storage Data

localStorage.setItem('user_forename', a);

localStorage.setItem('user_surname', b);

localStorage.setItem('learnername', c);

 

On subsequently hyperlinked pages –

//Get data from Browser local storage

 

var player = GetPlayer();

var user_forename = localStorage.getItem('user_forename');

var user_surname = localStorage.getItem('user_surname');

var learnername = localStorage.getItem('learnername');

 

//Set the variable values within the course

player.SetVar('user_forename',user_forename);

player.SetVar('user_surname',user_surname);

player.SetVar('learnername',learnername);

 

So my question is this, since ‘Can I use, indicates localStorage is supported in all the browsers I am testing, why can I only get it to work fully in Chrome?

 Sorry, I can't supply a copy of the .story files due to (a) security ratings and (b) their size

As a side note, there doesn’t appear to be much on this topic in the forum, so maybe this will help future users as well as myself.

16 Replies
OWEN HOLT

I haven't played with local storage but have been thinking about it.  I don't know if it will make a difference but:

  1. try clearing the storage 1st before saving anything (local storage has limited space)
    Do this at the START of a course (at timeline start of 1st slide on your landing page course)
    window.localStorage.clear();
  2. and also try adding the "window." specification to your storage calls:

    //Export to Browser Local Storage Data
    window.localStorage.setItem('user_forename', a);
    window.localStorage.setItem('user_surname', b);
    window.localStorage.setItem('learnername', c);

    //Get data from Browser local storage
    var player = GetPlayer();
    var user_forename = window.localStorage.getItem('user_forename');
    var user_surname = window.localStorage.getItem('user_surname');
    var learnername = window.localStorage.getItem('learnername');

Disclaimer: I haven't tested this in any browser. :-)

Chris Clift

Hi Owen

Thanks for the input, I'll give it a go. Since I know, in principle, that it works, as it's seamless on Chrome, I have done some further digging and found that the issue with Firefox may be due to the data being called before the DOM is ready to action it. It seems a little complex and possibly a bug in Firefox, so going to leave that one for the moment and concentrate on IE and Edge and see if your suggestion makes a difference.

I'll keep you posted. :)

OWEN HOLT

You are not being stupid Phil.

If your use case is to use the "cookie" for different sessions, you would need to omit that piece of the code so the cookies would stay available. If, however, your use case is to pass info between different .storyfiles opening in different tabs within a browser during a single session... keeping it in will help you manage storage space.  If the code works through trials without it, than storage isn't an issue and it does you no harm to loose it.

#YourMileageMayVary 

OWEN HOLT

Also, they way I responded does indicate launching all of that code together, but really it's a timing thing. Sorry for not being more concise in separating the code out. I'll go fix that. 

Use the clear code at timeline start on your opening slide. If you are set to "resume" this will only clear the cache when the user starts (or restarts) the course from the very beginning (meaning they have chosen to "start fresh").