Trouble creating unique ID as it is being overwritten each refresh

Question

This function is called as a form submit, and further calls a new function for rendering the list of divs. After this is done the website is refreshed because of drag and drop functionality. The problem is that I cant seem to find a way to create an unique ID that persists through page refresh and isnt overwritten on page load because of ex: "let taskId = 0".

Any ideas? :)

function createNewTask(event){
  if(document.querySelector("[name='description']").value === "") {
    alert("Cannot add empty task.");
  } else {
    event.preventDefault();
    let taskId = 0;
    const description = document.querySelector("[name='description']").value;
    const givenTo = document.querySelector("[name ='givenTo']").value;
    const createdByName = document.querySelector("[name = 'workerName']").value;
    const task = {taskId, description, givenTo, createdByName, section: 'task-section'};
    const taskList = JSON.parse(window.localStorage.getItem("taskList")) || [];
    taskId++;
    taskList.push(task);
    window.localStorage.setItem("taskList", JSON.stringify(taskList));
    // renderTaskList();
    renderStoredList();
    //Reload page after createNewTask to activate draggable
    location.reload();
  }  
}

`taskId++;` is useless, because it’s never used again in this scope. Every time the function is called, `let taskId = 0;` causes `taskId` to be set to `0` again. You should move this variable to an outer scope. — Sebastian Simon, May 23 '20 at 13:46
Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads). You’re already using `localStorage`, so why not save `taskId` there? Alternatively, infer it from `(JSON.parse(localStorage.getItem("taskList")) ?? []).slice(-1)[0]?.taskId` (or some variant compatible with older browsers). — Sebastian Simon, May 23 '20 at 13:47

score 0 · Answer 1 · answered May 23 '20 at 13:46

As I cannot add a comment yet, I'll post it here as an answer. What I would do on my end to keep track of the taskId is to also store the latest taskId that was last used in my localStorage, that way, it would persist.

window.localStorage.setItem('lastTaskId', taskId);

And then simply take that each time the page loads. Hope this helps!

score 0 · Accepted Answer · edited May 23 '20 at 16:15

Use length to get the next taskId.

function createNewTask(event){
    if(document.querySelector("[name='description']").value === ""){
        alert("Cannot add empty task.");
    } else {
        event.preventDefault();
        const tasklist = JSON.parse(window.localStorage.getItem("taskList")) || []
        let taskId = tasklist.length;
        const description = document.querySelector("[name='description']").value;
        const givenTo = document.querySelector("[name ='givenTo']").value;
        const createdByName = document.querySelector("[name = 'workerName']").value;
        const task = {taskId, description, givenTo, createdByName, section: 'task-section'};
        taskList.push(task);
        window.localStorage.setItem("taskList", JSON.stringify(taskList));
        // renderTaskList();
        renderStoredList();
        //Reload page after createNewTask to activate draggable
        location.reload();
    }
}

score 0 · Answer 3 · answered May 23 '20 at 13:53

0

What if you assign taskId based on previous length of the taskList:

const taskList = JSON.parse(window.localStorage.getItem("taskList")) || [];
let taskId = taskList.length

answered May 23 '20 at 13:53

Ozzyn

1
1
2

Trouble creating unique ID as it is being overwritten each refresh

3 Answers3