JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" />
<button>
    Add to list
</button>

<ul id="content">

</ul>

JavaScript

const localStorageMiniWrapper = () => {
        const initStorage = () => {
            localStorage.setItem("dummy_data", JSON.stringify([]));
        }

        const addItem = (value) => {
            const storedData = JSON.parse(localStorage.getItem("dummy_data"));
            storedData.push(value);
            localStorage.setItem("dummy_data", JSON.stringify(storedData));
        }

        const items = () => {
            return JSON.parse(localStorage.getItem("dummy_data"));
        }

        return {
            initStorage,
            addItem,
            items,
        }
    }

    window.onload = () => {
        const input = document.querySelector("input");
        const button = document.querySelector("button");
        const contentContainer = document.querySelector("#content");

        const localStorageMW = localStorageMiniWrapper();
        localStorageMW.initStorage();

        const updateDivContent = (div, data) => {
            div.innerHTML = data.reduce((acc, cv) => acc + `<li>${cv}</li>`, "");
        }


        button.addEventListener("click", () => {
            const contentToAdd = input.value;
            localStorageMW.addItem(contentToAdd);
            updateDivContent(contentContainer, localStorageMW.items());
        })
    }