Как правильно работать с массивами в localStorage?
 

Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующую логику:
У меня есть следующая структура:
class NavigateServise записывает и читает данные с localStorage.
navigateServise.js

class NavigateServise {
  constructor() {
    this.list = [];
    this.init();
  }

  init() {
    console.log("init");
  }

  setData = (id) => {
    this.list = this.list.includes(id) ? this.list.filter(n => n !== id) : [...this.list, id];

    const listM = JSON.stringify(this.list);

    window.localStorage.setItem('data', listM);
  }

  getData = () => {
    return window.localStorage.getItem('data');
  }
}

const navigateServise = new NavigateServise();
export {navigateServise};

Item.js

const Item = (props) => {
  console.log('Item render');
  return (
    <li
      className="item"
      onClick={props.clicked}
    >
      {props.item.value}
    </li>
  )
}

export default Item;

App.js

import React from "react";
import Item from "./Item";
import {navigateServise} from "./navigateServise";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.dataFromLocalStorage = JSON.parse(navigateServise.getData());
    console.log(this.dataFromLocalStorage);

    this.items = [
      {id: 1, value: "item 1"},
      {id: 2, value: "item 2"},
      {id: 3, value: "item 3"},
      {id: 4, value: "item 4"},
      {id: 5, value: "item 5"},
      {id: 6, value: "item 6"},
      {id: 7, value: "item 7"},
      {id: 8, value: "item 8"}
    ];
  }

  setData = (id) => {
    navigateServise.setData(id);
  };

  render() {
    return (
      <React.Fragment>
        {
          this.items.map((item, index) => {
            return (
              <ul
                className=""
                key={index}
              >
                <Item
                  item={item}
                  clicked={() => this.setData(item.id)}
                />
              </ul>
            );
          })
        }
      </React.Fragment>
    );
  }
}

export default App;

Когда данных в localStorage нет, я их туда записываю. Кода я перезагружаю страницу, на данный момент и click на элементы я заново перезаписываю данные. Мне же нужно продолжить работать с существующими. Буду благодарен любой помощи.

так можно отследить перезагрузку страницы

<div id="test"></div>
    <script>
      window.onload = function () {
        window.name = (+window.name || 0) + 1;
        test.innerHTML = window.name;
      };
    </script>