how to use localstorage in to do list project

Question

Is this the correct way to store projects and tasks with localstorage? I also need to get the localstorage every time the page refreshes. So how do I do that?

export function newProject(name) {
    allProjects.push({
        projectTitle: name,
        id: crypto.randomUUID(),
        tasks: []
    })
    getProjectId(name)
    save(name, project)
}

export function save(title, task) {
    localStorage.setItem(title, JSON.stringify(task))
}

Answer 1

project is undefined so you need to define it first.

const project = {
    projectTitle: name,
    id: crypto.randomUUID(),
    tasks: []
}
allProjects.push(project)
getProjectId(name)
save(name, project)

to get all projects on refresh, you need to maintain an array of names in localstorage, or save all projects as array in one key.

EDIT: So the question is not entirely well described, but i did my best. Add exports to functions you need and use your getProjectId if needed. I used an approach with separate array of ID's to maintain the list of projects.

function createNewProject(name) {
    // create and return project object
    return {
        title: name,
        id: crypto.randomUUID(),
        tasks: []
    };
}

function saveProject(storageKey, projectObject) {
    // get current list of project keys or create new list
    const allProjectKeys = JSON.parse(localStorage.getItem("allProjectKeys")) ?? [];

    // add new one to the list
    allProjectKeys.push(storageKey);

    // save current list of project keys
    localStorage.setItem("allProjectKeys", JSON.stringify(allProjectKeys));

    // save project data
    localStorage.setItem(storageKey, JSON.stringify(projectObject));
}

function getProjectByKey(storageKey) {
    // get single project by given key
    return JSON.parse(localStorage.getItem(storageKey));
}

function getAllProjects() {
    // get list of all project keys, and map each of them to get actual project instead of project key
    return JSON.parse(localStorage.getItem("allProjectKeys")).map(getProjectByKey);
}


const testProject = createNewProject("test");

saveProject(testProject.id, testProject);

console.log(getProjectByKey(testProject.id));
console.log(getAllProjects());