localStorage in Firefox

Question

Ok, so I have several pages that use localStorage. On the first page it creates first item of localStorage:

$('#id').click(function(){
    localStorage.text = $(this).val();
});

This part of the code works fine in all browsers.

Now on the next page, I am adding more data to storage:

    $('#someid').click(function(e) {
// stores variables in localStorage
        localStorage.background = img;
        localStorage.fSize = fontSize;
        localStorage.text = t;
        localStorage.textX = Tx;
        localStorage.align = alignVal;
        localStorage.rotationAngle = Deg;

    window.location = 'somepage.php';

For some reason this part does not work in Firefox (any version), but works perfectly in IE and Chrome.

What could be the issue here? And could I fix it if use sessionStorage instead?

Thanks.

Ok. here is an update: I use localStorage variables to populate php form on second page and after that clear the storage. If I do not clear the storage - everything works just fine. Is there anyway to clear storage only after all variables have been copied to form?

Answer 1

I managed to get this to work in FireFox using the following code:

Preview: http://barriereader.co.uk/localstoragetest/

Code:

 $('#someid').on('click', function(e) {
        window.localStorage.setItem('background', img);
        window.localStorage.setItem('fSize', fontSize);
        window.localStorage.setItem('text', t);
        window.localStorage.setItem('textX', Tx);
        window.localStorage.setItem('align', alignVal);
        window.localStorage.setItem('rotationAngle', Deg);

        window.location = 'page2.html';
    });

and to retrieve and remove sequentially:

if (window.localStorage.getItem('background')) {
    var backgroundVariable = window.localStorage.getItem('background');
    window.localStorage.removeItem('background');
}