localStorage.getItem data is showing up as null

Question

I am making A constructor function called LocalDataStore for my game/physics engine. The purpose Is to make It much simpler to use Javascript's localStorage system.

Everything works fine until I try to get and parse the data then push It into my ParsedData Array(which Is just A global array to hold the data).

The data shows up as null In the ParsedData Array and In localStorage there Is no data at all. If anyone can lead me In the right direction or can tell me what they think Is Wrong That would be great, Thank you.

(If you want to test this yourself just make two HTML documents + two JS files, Than make a third JS file called library then paste my Code that I posted here. Use one of your HTML docs to add and then set data into localStorage using my LocalDataStore Class. Than use the second HTML doc to get the data. look in your console to see if you were able to successfully get the data from the first document)

//-----------------------//
let LocalData  = new Array(); // local game/player data Array which is used for the LocalDataStore system.
let ParsedData = new Array(); // LocalData is sent here after it is parsed using 'LocalDataStore.get()'.
//-----------------------//

/**********************************************
* You can 'set' data in one html file then access it in another using 'get'.
* 
* LocalDataStore.set('key') to set a key name for the data.
*
* LocalDataStore.get('key') to access the data using the key name.
*
* LocalDataStore.add('myData') to add data to the LocalData Array.
*
* LocalDataStore.clear() clears all data.
*
* LocalDataStore.remove('key') to remove specific data.
**********************************************/

let LocalDataStore = function(){ 
    // add data to the LocalData Array.
    this.add = function(data){ 
        LocalData.push(data);
        
        console.log("New Data has been added to the 'LocalData' Array");
    };

    this.set = function(key){ 
        // maybe I should clear localStorage here?
        localStorage.clear();
        
        // set a key name for your data in the LocalData Array.
        localStorage.setItem(key, JSON.stringify(LocalData));

        if(LocalData[0] == null || LocalData[0] == undefined){
            console.log("[error@ 'LocalData']: 'no data has been found.'")
        }

        console.log("'LocalData' has been set with the key name: ["+key+"]");
    };

    this.get = function(key){ 
        // retrieve your data from LocalData and parse & add it to the ParsedData Array.
        let userData = JSON.parse(localStorage.getItem(key));

        ParsedData.push(userData);

        console.log("[parsed-data: "+userData+"]");

        if(ParsedData[0] == null || ParsedData[0] == undefined){
            console.log("[error@ 'ParsedData']: 'data-parsing failed or no data has been found.'")
        }

        console.log("Accessed & Parsed 'LocalData' with the key name: ["+key+"].");
        console.log("New Data has been Added to the 'ParsedData' Array.");
    };

    this.remove = function(key){ 
        // remove specific data from localStorage.
        localStorage.removeItem(key)
    };

    this.clear = function(){ 
        // clear all data from localStorage.
        localStorage.clear();
    };
};

This Is the Console Output from the first HTML doc:

New Data has been added to the 'LocalData' Array
'LocalData' has been set with the key name: [pd1]
localStorage
Storage {pd1: '[5]', length: 1}

This Is the Console Output from the second HTML doc:

[parsed-data: null]
[error@ 'ParsedData']: 'data-parsing failed or no data has been found.'
Accessed & Parsed 'LocalData' with the key name: [pd1].
New Data has been Added to the 'ParsedData' Array.