Как интегрировать localStorage для сохранения данных (в массиве) для текущей сессии браузера?

Question

Итак, у меня написана эта программа, в которой вы можете ввести в строку поиска параметры, которые отображаются в виде устройств из API.Когда вы нажимаете на устройство, оно добавляется в вашу «корзину», и вы также можете удалить элемент, нажав на него, пока он находится в вашей корзине.Я знаю, что должен использовать localStorage, чтобы эти устройства сохранялись для текущего сеанса браузера, но я никогда раньше не использовал localStorage и не уверен, как интегрировать его в код, который я уже написал.Есть идеи?

class App extends React.Component {
  state = {
    search: "",
    devices: [],
    bag: []
  };

  addDevice = (e, deviceTitle) => {
    const array = Array.from(this.state.bag);
    if (array.indexOf(deviceTitle) === -1) { //if item has not already been clicked
      array.push(deviceTitle);
    } else {
      return;
    }
    this.setState({
      bag: array
    });
  };

  removeDevice = (e, deviceTitle) => {
    this.setState(prevState => ({
      bag: prevState.bag.filter(d => d !== deviceTitle)
    }));
  };

  removeAll = e => {
    this.setState({
      bag: []
    });
  };

  onChange = e => {
    const { value } = e.target;
    this.setState({
      search: value
    });

    this.search(value);
  };

  search = search => {
    const url = `https://www.ifixit.com/api/2.0/suggest/${search}?doctypes=device`;

    fetch(url)
      .then(results => results.json())
      .then(data => {
        this.setState({ devices: data.results });
      });
  };

  componentDidMount() {
    this.search("");
  }

  render() {
    return (
      <div>
        <form>
          <input
            type="text"
            placeholder="Search for devices..."
            onChange={this.onChange}
          />
          {this.state.devices.map(device => (
            <ul key={device.title}>
              <p>
                {device.title}{" "}
                <i
                  className="fas fa-plus"
                  style={{ cursor: "pointer", color: "green" }}
                  onClick={e => this.addDevice(e, device.title)}
                />
              </p>
            </ul>
          ))}
        </form>
        {this.state.bag.map(device => (
          <p key={device.title}>
            {device}
            <i
              className="fas fa-times"
              style={{ cursor: "pointer", color: "red" }}
              onClick={e => this.removeDevice(e, device)}
            />
          </p>
        ))}
        <button onClick={e => this.removeAll(e)}>Remove all</button>
      </div>
    );
  }
}

Answer 1

:-) Привет, Эмили!

Действительно, здесь вы можете использовать простые методы объекта хранения JavaScript, в частности, объект localSession.

Методы:

• setItem (keyName, yourObject) для хранения вашего объекта в локальном хранилище веб-браузера,
• getItem (keyName), чтобы забрать ваш объект из локального хранилища,
• возможно removeItem (keyName), если вам нужно удалить свой объект из локального хранилища.

Объекты должны быть объектами String в локальном хранилище. Вот почему sarabs3 использовал метод JSON.stringify, чтобы преобразовать его в строку перед сохранением.

Надеюсь, это поможет!

Answer 2

Ваш код делает именно то, что вы хотите достичь.Почему вы хотите интегрировать локальное хранилище?Единственная причина, по которой я могу понять, - это сохранить корзину после обновления страницы.

Локальное хранилище сохраняет данные в виде простых строк, чтобы сохранить массив. Вы можете сделать это, как показано ниже

const array = {"devices": [{name: 1}, {name: 2}]};
localStorage.setItem('devices', JSON.stringify(array));

// and to get this item
let devicesFromStorage = localStorage.getItem('devices');
devicesFromStorage = JSON.parse(devicesFromStorage).devices;

И в вашем компоненте

search = search => {
    const url = `https://www.ifixit.com/api/2.0/suggest/${search}?doctypes=device`;

    fetch(url)
      .then(results => results.json())
      .then(data => {
        this.setState({ devices: data.results });
        localStorage.setItem('devices', JSON.stringify({ devices: data.results }));
      });
  };

Подробнее о локальном хранилище вы можете прочитать здесь https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Надеюсь, это вам поможет.