Storing a object with localStorage
<p>I can't seem to find a way for localStorage to record the clicks variable when I refresh the browser.</p>

<p>I've tried using JSON.stringify and JSON.parse, but then found out about parseInt, which seems a better alternative (I'm just trying to store a number). </p>

<p>I'm brand new to programming and all the examples I checked were pure javascript, too complicated/poorly explained or outdated. Hope you can help me out. I've been trying to solve this issue for over a week.</p>

<p>Some more info: I'm using Phaser 2.5.0 with MAMP. Google Chrome v49.0.2623.112 (64-bit), OS X 10.8.5.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

var scoreText;
var clicks = 0;



function preload() {

    game.load.image('clickBox', 'assets/ClickMe.png');
    game.stage.backgroundColor = '#182d3b';
    game.stage.disableVisibilityChange = true; 
}


function create() {

    localStorage.setItem('clicks', parseInt('clicks'));
    localStorage.getItem('clicks');



    button = game.add.button(game.width/2, game.height/2, 'clickBox', upScoreText);


    scoreText = game.add.text(30, 30, "CLICKS: " + clicks, {font: "20px Arial", fill: "#ffffff", align: "left"});

    button.scale.x = 0.5;
    button.scale.y = 0.5;
    button.anchor.setTo(0.5);
    button.inputEnabled = true;
}


function update () {

            scoreText.setText("CLICKS: " + clicks);        
}


function upScoreText () {

     clicks++;
}</code></pre>
</div>
</div>
</p>