Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2019, 16:34
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 72

Как правильно работать с массивами в 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 на элементы я заново перезаписываю данные. Мне же нужно продолжить работать с существующими. Буду благодарен любой помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2019, 16:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

так можно отследить перезагрузку страницы
<div id="test"></div>
    <script>
      window.onload = function () {
        window.name = (+window.name || 0) + 1;
        test.innerHTML = window.name;
      };
    </script>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно работать с динамической функцией LoGwi-N Events/DOM/Window 1 29.10.2017 15:09
Как правильно получить и присвоить данные полученные из сервера Axios, react-redux hambat Общие вопросы Javascript 5 07.03.2017 17:09
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14