Retrieve variable value from local Storage and display on canvas

Question

Hi
I'm working on a project that has multiple html files (the projects are split into 12 so 12 different edge projects and im linking them via window.open()). I have a variable that keeps track of correct answers stored in LocalStorage html object. I have managed to get the localStorage variable to increment up by one each time the object is correct however my last step is to get the variable and them display the result on the canvas. I have tried
var outPut localStorage.getItem(' ') method to retrieve the variable then used the set and get method to display the result however it doesn't work. Im not sure if I need a for loop to go though the localStorage and get the elements
Code:
// insert code to be run when the composition is fully loaded here
yepnope({nope:['jquery-ui-1.10.0.custom.min.js','jquery.ui.touch-punch.min.js'],complete: init}); // load the jquery files
sym.setVariable("myScore", 0);
var c = localStorage["myCount"] || 0; //loading from localStorage
function init(){
sym.getSymbol("barLimit").$('scrubber').draggable({start: function(e){
},drag: function(e,ui){ // start: ...  // Find original position of dragged image
var leftLimitScrubber  = sym.getSymbol('barLimit').$('scrubber').position().left; // position of the scrubber
var rightLimitScrubber  = sym.getSymbol('barLimit').$('leftLimit').position().left;
var LimitTwoLeft  = sym.getSymbol('barLimit').$('rightLimit').position().left;
if(leftLimitScrubber == rightLimitScrubber){
  sym.getSymbol('correctBar1').play('in'); //
  sym.getSymbol('nextButton').play('in');
  sym.getSymbol('incorrectBar1').play('out'); //
  sym.getSymbol('thumbsDown1').play('out'); //
  sym.getSymbol('thumbsUp1').play('in'); //
  sym.getSymbol('congrats').play('in'); //
localStorage["myCount"] = parseInt(c)+1; //Converting string to number, and then saving it
console.log("numberOfCorrectAnswers", localStorage["myCount"]);
var finalScore = sym.getVariable("myScore");
finalScore = c;
sym.setVariable("myScore", finalScore);
sym.$("Score").html(finalScore);
} else if(leftLimitScrubber == LimitTwoLeft){
sym.getSymbol('incorrectBar1').play('in');
sym.getSymbol('correctBar1').play('out');
sym.getSymbol('thumbsUp1').play('out');
sym.getSymbol('thumbsDown1').play('in');
axis: "x",
containment: "parent"
       //for (var i = 0; i < localStorage.length; i++){ // iterate throught the local storage
         //var getItem = localStorage.getItem(localStorage.key(i));
          //if(getItem == 'numberOfCorrectAnswers' ){
The above is the code for the 12th project in  this projects it needs to display the variable inside the object localStorage and display on the canvas.
Any help will mean a lot. Thank You in advance
P.S edge animate has a lot of bugs hard to code in

Answer 1

what you need to do is to create a text box and set a default value of zero. Once that is don't you need a code on the stage which grabs the value form the localStorage object. I used the .text() jquery method to display the value on the canvas. So the zero will be replaced with whatever the value of the localStorage is.
You also need a if statement to check if the localStorage is undefined, if its not then grab the value and display on the canvas.
e.g
var number = localStorage['finalValue']; // for the sake of completeness I had to put this line of code
if( number ! = undefined){ // if not undefined so the object exits then ...
     sym.$(' (text identifier) '). text(number); // note text identifier is the name of the text box you create in edge
} // Done