Clear storage with addEventListener

Question

I am trying to clear localstorage with a button and an addEventListener. But its not working, and I cant figure out why. Thanks.

    const clearStorage = document.querySelector(".clear-button");

    clearStorage.addEventListener("click", (function(){
        localStorage.clear();
    }));
};

This code gets imported to the script below:

import { getFavourites } from "./utils/getFavs.js";
import createMenu from "./components/createMenu.js";
import displayMessage from "./components/displayMessage.js";
import { clearFavList } from "./components/clearFavList.js"

createMenu();
getFavourites();

const favouriteList = getFavourites();
const articlesContainer = document.querySelector(".favourites-container");
if(!favouriteList.length) {
    displayMessage("error", "You don't have any saved favourites yet.", ".favourites-container");
}
favouriteList.forEach((favourite) => {
    articlesContainer.innerHTML += `<div class="article">
                                    <div class="article-content-text">
                                        <h2 class="article-title fav-wrapper-text">Title: ${favourite.title}</h2>
                                    </div>
                                    <div>
                                        <i class="fas fa-heart favButton"></i>
                                    </div>
                                    </div>`;
});

clearFavList(favouriteList);

Answer 1

This code, from a React auth component, have all the basic functions to handle storage.

// you can create multiple storage stores
const LOCAL_STORAGE_STORE = 'storage_sample';

export const getHasLocalStorageAuth = () => {
    // check local storage
    const localStorage = __getLocalStorage(LOCAL_STORAGE_STORE);
    return { status: !!localStorage, data: localStorage.auth };
};

export const clearLocalStorageAuth = () => {
    __clearLocalStorage(LOCAL_STORAGE_STORE);
    return;
};

export const setLocalStorageAuth = (newLocalStorage: any) => {
    __setLocalStorage(LOCAL_STORAGE_STORE, newLocalStorage);
    return;
};

// setting data to localstorage
export function __setLocalStorage(
    localStorageName: string,
    localStorageValue: any,
    isJson = true
) {
    if (isJson) {
        localStorage.setItem(localStorageName, JSON.stringify(localStorageValue));
    } else {
        localStorage.setItem(localStorageName, localStorageValue);
    }
}

// getting data from localstorage
export function __getLocalStorage(localStorageName: string): any {
    let localStorageValue: any;
    if (localStorage.getItem(localStorageName) !== null) {
        localStorageValue = localStorage.getItem(localStorageName);
    } else {
        localStorageValue = false;
    }

    return JSON.parse(localStorageValue);
}

// clear data from localstorage
export function __clearLocalStorage(localStorageName: string | null) {
    localStorage.clear();
}