Попытка использовать локальное хранилище в приложении реакции, но не работает между страницами - PullRequest
Новая
       41

Попытка использовать локальное хранилище в приложении реакции, но не работает между страницами

1 голос
/ 22 января 2020

Я пытаюсь сохранить массив в локальном хранилище в моем приложении реагирования, чтобы, если пользователь переходит на другую страницу приложения или закрывает приложение и снова открывает его, значение остается прежним.

В моем индексе. js (упрощенный код): 

import ls from 'local-storage';
function HomeIndex() {
  const [testString, setTestString] = useState(ls('localStorageText') || ''); 

  if(condition){
    const array = [1,2,3]; 
    const saveArray = {key: array}; 
    localStorage.setItem('key1', JSON.stringify(saveArray)); 
    const restoreValue = localStorage.getItem('key1');
    setTestString(JSON.parse(restoreValue).key);
  }

  return (
    <div className="col-12">
      {testString}
    </div>
  );
}

Когда я нажимаю кнопку, и условие выполняется, значение testString отображает 123 в виде должен. И это имеет значение. Однако он не работает, когда я пытаюсь добавить свой собственный массив. 

const array = reversedHistoryText; 
const saveArray = {key: array}; 
localStorage.setItem('key1', JSON.stringify(saveArray)); 
const restoreValue = localStorage.getItem('key1');
setTestString(JSON.parse(restoreValue).key);

Он ничего не отображает при первом нажатии кнопки, а затем выдает ошибку во второй раз: 

Error: Minified React error #31;

Когда я делаю этот тест: 

setTestString(JSON.stringify(reversedHistoryText));

Результат []

Ответы [ 4 ]

1 голос
/ 22 января 2020

Вам необходимо установить testString на значение localStorage. 

import ls from "local-storage";
import React, { useEffect, useState } from "react";

function MyComponent() {
  const [testArray, setTestArray] = useState([]);

  useEffect(() => {
    setTestArray(ls("testArray") || []);
  }, []);

  function handleClick(e) {
    ls("testArray", [
      { id: 1, name: "this" },
      { id: 2, name: "thing" },
      { id: 3, name: "is" },
      { id: 4, name: "cool" }
    ]);
    setTestArray(ls("testArray"));
  }

  return (
    <div className="col-12">
      <ul>
        {testArray.map(obj => (
          <p key={obj.id}>{obj.name}</p>
        ))}
      </ul>
      <button onClick={handleClick}>Set The State</button>
    </div>
  );
}

export default MyComponent;
0 голосов
/ 23 января 2020

Чтобы установить использование 

localStorage.setItem('itemName', JSON.stringify(arrayName));

Чтобы получить использование 

whatEver = jQuery.parseJSON(localStorage.getItem('itemName'));

Локальное хранилище хранит строки

0 голосов
/ 22 января 2020

Использовать 

if(condition) ls('localStorageText', "TEST");
setTestString(ls('localStorageText')|| ' '); }

Вместо 

if(condition){ ls('localStorageText', "TEST");
 setTestString(ls('localStorageText')); }

Потому что, когда вы go возвращаетесь на страницу индекса, создается новый экземпляр этого компонента, и я думаю, что условие в if утверждение ложно, поэтому код не изменяет значение установки ...

0 голосов
/ 22 января 2020

Вам не нужно использовать стороннее приложение для localStorage.

Просто используйте localStorage, ничего не импортируя.

Чтобы сохранить, 

localStorage.setItem('key', 'value');

Чтобы получить значение из localStorage, 

localStorage.getItem('key') // value

Чтобы удалить значение, 

localStorage.removeItem('key')
...