I'm trying to load 3 CSV files and save the stringified objects into the local storage. 3 CSV files combined does not exceed memory of 2MB.

The program successfully saves 3 CSV files into the localStorage when the user clicks on the button(id="submit_files"). However, the LocalStorage shows that it only saved either one or two when the page is refreshed.

I noticed that all 3 stringified objects were stored in the localStorage when I added "e.preventDefault();" in the event handler for the button to stop from refreshing the page on its own. However, the localStorage shows that there's only either one or two saved objects in random when refreshed.

The logic of code seems right, but it looks like there's something that I don't know about the LocalStorage. I'm suspecting that there's an issue with the global variables when the page gets refreshed. What am I missing?

HTML:

<form>
    <label for="tag_csv"> Upload "tag_list.csv" file : </label>
    <input type="file" id="tag_csv" accept=".csv" required>

    <label for="radar_csv"> Upload "radar_list.csv" file : </label>
    <input type="file" id="radar_csv" accept=".csv" required>

    <label for="decisions_csv"> Upload "tag_decisions.csv" file : </label>
    <input type="file" id="decisions_csv" accept=".csv" required>

    <button type="submit" id="submit_files"> Upload File </button>
</form>

JS:

let tag_list;
let radar_list;
let decisions_list;

// Check if csv objects are saved in to local storage. 
// If true, set all three global variables to the csv objects respectively. 
$(document).ready( function(){
    if (isCsvLoaded()) {
        console.log("csv is loaded")

       // Initialize tag_list, radar_list, decisions_list
        retrieveObjects()
    } else {
        console.log("Not enough csv in localstorage")
    }
})

const submit_button = document.getElementById('submit_files');
submit_button.addEventListener('click', (e) => {
    createDict();
    // e.preventDefault();
})

function retrieveObjects() {
    tag_list = JSON.parse(localStorage.getItem('tag_list'));
    radar_list = JSON.parse(localStorage.getItem('radar_list'));
    decisions_list = JSON.parse(localStorage.getItem('decisions_list'));
}

// Use this function to parse all three CSV files and store them in local storage.
async function createDict() {
    console.log("createDict()")
    try {
        let parsed_tag_list = await parseCSV('#tag_csv')
        let tag_list_serialized = JSON.stringify(parsed_tag_list)
        localStorage.setItem("tag_list", tag_list_serialized)

        let parsed_radar_list = await parseCSV('#radar_csv')
        let radar_list_serialized = JSON.stringify(parsed_radar_list)
        localStorage.setItem("radar_list", radar_list_serialized)

        let parsed_decisions_list = await parseCSV('#decisions_csv')
        let decisions_list_serialized = JSON.stringify(parsed_decisions_list)
        localStorage.setItem("decisions_list", decisions_list_serialized)
    
    } catch (err) {
        console.log(err)
    }
};

CodePudding user response：

As @epascarello mentioned in the comment section of the initial post, my program had a race condition where the form submission speed was faster than my calls processing the data.

Therefore, it is necessary for my program to include " e.preventDefault() " in the button handler function to stop the program from refreshing the page before all the data have been stored.

CodePudding user response：

Max storage capacity for the locastorage is ~ 5MB. To check the storage capacity try this:-

    const check = bytes => {
  

    try {
        localStorage.clear();
        localStorage.setItem('a', '0'.repeat(bytes));
        localStorage.clear();
        return true;
      } catch(e) {
        localStorage.clear();
        return false;
      }

};