How Can I Implement Local Storage Into My Wordle Clone?

Question

I'm currently working on a Wordle clone and I have the majority of the game set up. I'm trying to implement a local save feature so that the players' progress does not disappear after they refresh the page. Being new to HTML, CSS, and JS, I am unsure of how to achieve this.

I know I can use:

window.localStorage.setItem('score', '10'); //Example

and everything else involved with localStorage.

I was thinking of doing something like this while also using localStorage with it:

var save = [];
save[row] = guess;

But I'm not sure how to actually get it into my code.

All my javascript code is below:

var height = 6; //number of guesses
var width = 5; //length of word

var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt

var gameOver = false;

var wordList = ["hello", "this", "is", "an", "example"]
var guessList = [`list of words in a database`]
guessList = guessList.concat(wordList);
var word; 
var length;
var widthFactor;

getWord(); 
function getWord() {
    var hist = new Date(2022, 3, 11); //year, month (starting at 0), day
    var curr = new Date();
    var numberOfDays = Math.ceil((curr - hist) / 8.64e7); // 31
    word = wordList[numberOfDays];
    word = word.toUpperCase();
    console.log(word);
}

window.onload = function() {
    initalize();
}

function initalize() {
    //Set board width
    let length = word.length;
    width = length;
    if (length == 4) {
        widthFactor = 32;
    } else if (length == 6) {
        widthFactor = 47;
    } else {
        widthFactor = 40;
    }
    
    // Get the root element
var r = document.querySelector(':root');
myFunction_set();
function myFunction_set() {
    // Set the value of variable --width to another value
    r.style.setProperty('--width', widthFactor);
  }

    // Create the game board
    for (let r = 0; r < height; r++) {
        for (let c = 0; c < width; c++) {
            let tile = document.createElement("span");
            tile.id = r.toString() + "-" + c.toString();
            tile.classList.add("tile");
            tile.innerText = "";
            document.getElementById("board").appendChild(tile);
        }
    }
    // Create the key board
    let keyboard = [
        ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
        ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
        ["Enter", "Z", "X", "C", "V", "B", "N", "M", "Del"]
    ]

    for (let i = 0; i < keyboard.length; i++) {
        let currRow = keyboard[i];
        let keyboardRow = document.createElement("div");
        keyboardRow.classList.add("keyboard-row");

        for (let j = 0; j < currRow.length; j++) {
            let keyTile = document.createElement("div");
            let key = currRow[j];
            keyTile.innerText = key;
            if (key == "Enter") {
                keyTile.id = "Enter";
            }
            else if (key == "Del") {
                keyTile.id = "Backspace";
            }
            else if ("A" <= key && key <= "Z") {
                keyTile.id = "Key" + key; 
            }

            keyTile.addEventListener("click", processKey);

            if (key == "Enter") {
                keyTile.classList.add("enter-key-tile");
            } else if ( key == "Del") {
                keyTile.classList.add("back-key-tile");
            } else {
                keyTile.classList.add("key-tile");
                keyTile.classList.add("none");
            }
            keyboardRow.appendChild(keyTile);
        }
        document.body.appendChild(keyboardRow);
    }

    //Listen for Key Press
    document.addEventListener("keyup", (e) => {
       processInput(e);
    })
}

function processKey () {
    let e = {"code" : this.id};
    processInput(e);
}

function processInput(e) {
    if (gameOver) return;

// alert(e.code);
if ("KeyA" <= e.code && e.code <= "KeyZ") {
    if (col < width) {
            let currTile = document.getElementById(row.toString() + '-' + col.toString());
            if (currTile.innerText == "") {
                currTile.innerText = e.code[3];
                col += 1;
            }
    }
}
else if (e.code == "Backspace") {
    if (0 < col && col <= width) {
        col -=1;
    }
    let currTile = document.getElementById(row.toString() + '-' + col.toString());
    currTile.innerText = "";
}
else if (e.code == "Enter" && col == width) {
    update()
}

if (!gameOver && row == height) {
    gameOver = true;
    document.getElementById("answer").innerText = word;
}
}



function update() {
    let guess = "";
    document.getElementById("answer").innerText = "";

    //string up guess word
    for (let c = 0; c < width; c++) {
        let currTile = document.getElementById(row.toString() + "-" + c.toString());
        let letter = currTile.innerText;
        guess += letter;
    }

    guess = guess.toLowerCase();

    if (!guessList.includes(guess)) {
        document.getElementById("answer").innerText = "Not in word list";
        setTimeout(function(){
            document.getElementById("answer").innerText = '';
        }, 1500);
        return;
    }

    //start processing game
    let correct = 0;
    let letterCount = {};
    for (let i = 0; i < word.length; i++) {
        letter = word[i];
        if (letterCount[letter]) {
            letterCount[letter] += 1;
        }
        else {
            letterCount[letter] = 1;
        }
    }

 //first iteration, check all correct ones
 for (let c = 0; c < width; c++) {
    let currTile = document.getElementById(row.toString() + '-' + c.toString());
    let letter = currTile.innerText;
    //Is it in the correct position?
    if (word[c] == letter) {
        currTile.classList.remove("present");
        currTile.classList.remove("absent");
        currTile.classList.remove("none");
        currTile.classList.add("correct");

        let keyTile = document.getElementById("Key" + letter);
        keyTile.classList.remove("present");
        keyTile.classList.remove("none");
        keyTile.classList.remove("absent");
        keyTile.classList.add("correct");
        correct += 1;
        letterCount[letter] -= 1;
    } 
    if (correct == width) {
        gameOver = true;
    }
}

//go again and mark which ones are present but wrong pos
    for (let c = 0; c < width; c++) {
            let currTile = document.getElementById(row.toString() + '-' + c.toString());
            let letter = currTile.innerText;
    
        if (!currTile.classList.contains("correct")) {
            //Is it in the word
            if (word.includes(letter) && letterCount[letter] > 0) {
                currTile.classList.add("present");
                let keyTile = document.getElementById("Key" + letter);
                if (!keyTile.classList.contains("correct")) {
                    keyTile.classList.remove("none");
                    keyTile.classList.remove("absent");
                    keyTile.classList.add("present");
                }
                letterCount[letter] -= 1;
            } ///Not in the word
            else {
                currTile.classList.add("absent");
                let keyTile = document.getElementById("Key" + letter);
                if (!(keyTile.classList.contains("correct") || keyTile.classList.contains("present"))) {
                    keyTile.classList.remove("none");
                    keyTile.classList.add("absent");
                }
            }
        }
    }
   


    row += 1; //Start new row
    col = 0; //Start at 0 for new row
}

If anyone has any ideas it would be much appreciated :)

Thanks!