I started writing JS code 3 weeks ago and currently I am trying to build a game-however for the past couple of days ran into a problem concerning the way I use local storage- basically the data is not being displayed on a page refresh-it is not being saved- here is the relevant part of my js file. One final thing that i wanted to add is that the browser also gives me the feedback that objectForMonsterMarkers.push is not a function – I tried to fix it, but I could not.

let playerCharachteristics = JSON.parse(localStorage.getItem('playerCharachteristics'));
let monsterCharachteritics = JSON.parse(localStorage.getItem('monsterCharachteritics'));
let objectForMonsterMarkers = JSON.parse(localStorage.getItem('monsterBooleanImage'));

if (objectForMonsterMarkers === null) {
  objectForMonsterMarkers = [];
};

if (playerCharachteristics || monsterCharachteritics === null) {

  playerCharachteristics = {
    pStrength: parseInt(Math.random() * 80), //stands for attack points, which are then increased in monsterhit pStrengthBar: parseInt (Math.random() * 80), pDefence: parseInt(Math.random() *70), pDefenceBar:parseInt (Math.random() * 80), pHealth: parseInt(Math.random() * 100), pHealthBar:true };

    monsterCharachteritics = {
      mStrength: 40,
      mStrengthBar: true,
      mDefence: parseInt(Math.random() * 80),
      mDefenceBar: parseInt(Math.random() * 80),
      mHealth: parseInt(Math.random() * 110),
      mHealthBar: parseInt(Math.random() * 80)
    };
  }
  else if (playerCharachteristics || monsterCharachteritics === null) {

    generateMonster(objectForMonsterMarkers);
  }

  function generateMonster(monsterBooleanImage) {

    let monsterHealthAdditionalHealthPoints = 800;

    console.log(monsterCharachteritics.mHealth);

    if (monsterBooleanImage === true) {
      console.log(monsterBooleanImage);
      divImage.innerHTML += `
      <img alt="" class="first" fetchpriority="auto" loading="auto"
              src="https://i.pinimg.com/564x/85/c8/f3/85c8f3eca9a5cbdef756956ba16b89dd.jpg" 
              id="gameCanvas" width="270" height="330" >
      `
      monsterHealthDiv.innerHTML += `
        <div id="monsterhealthbar"> 
            <div class="monsterhealthfill" > 
                <i class="hp3"> Monster Health
                </i>
            </div>
        </div> 
        <div id="monsterstrengthbar"> 
        <div class="monsterstrengthfill" > 
            <i class="hp3"> Monster Strength
            </i>
        </div>
    </div> 
    `
      monsterSDFbarFills.mhFill = document.querySelector(".monsterhealthfill");
      monsterCharachteritics.mHealthBar = document.querySelector("#monsterhealthbar");
      monsterCharachteritics.mStrengthBar = document.querySelector("#monsterstrengthbar")
      monsterSDFbarFills.msFill = document.querySelector(".monsterstrengthfill");
      monsterCharachteritics.mHealth += monsterHealthAdditionalHealthPoints;
      //monsterCharachteritics.mHealthBar= monsterHealthBar;

      monsterCharachteritics.mHealthBar.style.width = monsterCharachteritics.mHealth + 'px';
      monsterCharachteritics.mStrength = 35; //that is base monster strength
      monsterSDFbarFills.mhFill.innerHTML = `
            <i class="hp3"> Monster Health Points -${monsterCharachteritics.mHealth}</i>
            `;
      monsterSDFbarFills.msFill.innerHTML = `
            <i class="hp3"> Monster Strength Points -${monsterCharachteritics.mStrength}</i>
            `;
      checker2++;
      if (checker2 === 1) {
        divThrowButon.innerHTML = `
         <button onclick="throwForStrengthHealth()"> Throw For Health and Base Strength</button> 
         `;
      }
      console.log(monsterBooleanImage);

      // <div id="deletebutton"> bezshe v divthrowbuton
      attackDiv.innerHTML = `        <button class="button"  onclick="monsterHit(${monsterBooleanImage})">Attack</button>        `;
      // moveButton.innerHTML=``;
      console.log(monsterBooleanImage);

      localStorage.setItem('monsterBooleanImage', JSON.stringify(monsterBooleanImage));
      localStorage.setItem('playerCharachteristics', JSON.stringify(playerCharachteristics));
      localStorage.setItem('monsterCharachteritics', JSON.stringify(monsterCharachteritics));

    }

  }

  function monsterHit(booleanGameMechanics) {
    console.log(booleanGameMechanics);
    let playerThrowAdditionalAttackPoints = parseInt(Math.random() * 80);
    let overallPlayerDamage = playerCharachteristics.pStrength + playerThrowAdditionalAttackPoints;
    let monsterThrowAdditionalAttackPoints = parseInt(Math.random() * 90);
    let overallMonsterDamage = monsterThrowAdditionalAttackPoints + monsterCharachteritics.mStrength;

    if (booleanGameMechanics === true) {
      console.log(booleanGameMechanics + 'isTrue');
      if (overallMonsterDamage > overallPlayerDamage) {
        attackExchangeCounter++
      }
      if (attackExchangeCounter >= 3) {
        attackDiv.innerHTML = `
                     `;
        attackDiv.innerHTML = `
                     <button onclick="secondAttack(${overallMonsterDamage},${booleanGameMechanics})"> Second Attack</button>
                     <button onclick="lowerYourAttackPoints(${booleanGameMechanics})"> Lower your attack points</button>
                     `
        attackExchangeCounter = 0;
      }
      playerCharachteristics.pHealth -= overallMonsterDamage;
      console.log(playerCharachteristics.pHealth);
      monsterCharachteritics.mHealth -= overallPlayerDamage;

      if (overallMonsterDamage > 50) {
        objectHealthWidth.widthForHealth -= 50;
      } else if (overallMonsterDamage > 100) {
        objectHealthWidth.widthForHealth -= 100;
      } else {
        objectHealthWidth.widthForHealth -= 20
      }
      console.log(playerCharachteristics.pHealthBar);
      console.log(playerCharachteristics.pHealthBar.style.width);
      playerCharachteristics.pHealthBar.style.width = objectHealthWidth.widthForHealth + "px";
      monsterCharachteritics.mHealthBar.style.width = monsterCharachteritics.mHealth + "px";

      console.log(playerCharachteristics.pHealthBar);
      console.log(playerCharachteristics.pHealthBar.style.width);



      monsterCharachteritics.mStrengthBar.style.width = monsterCharachteritics.mStrength * 10 + "px";

      monsterSDFbarFills.mhFill.innerHTML = `
                   <i class="hp3"> Monster Health Points -${monsterCharachteritics.mHealth}</i>
                   `;
      monsterSDFbarFills.msFill.innerHTML = `
                   <i class="hp3"> Monster Strength Points -${monsterCharachteritics.mStrength}</i>
                   `;
      streDefeHealthBarFills.hFill.innerHTML = `
                   <i class="i">Health Points -${playerCharachteristics.pHealth}</i>
                   `;
      riddleContainer.innerHTML = `
                   <i class="hp3"> You dealt ${overallPlayerDamage} health points worth of damage to your opponent!</i>
                   <i class="hp3"> You received an overall damage of ${overallMonsterDamage} health points by your opponent!</i>
                   `


      if (monsterCharachteritics.mHealth < 0) {
        playerCharachteristics.pHealth += 300;

        healtWidth = 1450;
        playerCharachteristics.pHealthBar.style.width = healtWidth + "px"; //just for style,not accurate-cant reflect length with the actual points sadly
        moveButton.innerHTML += `
                       <button class="Move" onclick="move()"> Throw Dice To Move</button>
                       `;
        divImage.innerHTML = ``;
        monsterHealthDiv.innerHTML = ``;
        attackDiv.innerHTML = ``;
        riddleContainer.innerHTML = ``;
        streDefeHealthBarFills.hFill.innerHTML = `
                   <i class="i">Health Points -${playerCharachteristics.pHealth}</i>
                   `;
      }
      if (playerCharachteristics.pHealth < 0) {
        mainContainer.style.backgroundColor = "red";
        mainContainer.innerHTML = `
                      <i class="hp6"> GAME OVER! YOU DIED!
                      </i>
                      `;
      }
      localStorage.setItem('playerCharachteristics', JSON.stringify(playerCharachteristics));
      localStorage.setItem('monsterCharachteritics', JSON.stringify(monsterCharachteritics));
      localStorage.setItem('monsterBooleanImage', JSON.stringify(booleanGameMechanics));

    }
  }