Как отобразить предыдущий сеанс пользователя с React? - PullRequest
Новая
       40

Как отобразить предыдущий сеанс пользователя с React?

0 голосов
/ 08 октября 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Может быть, что-то вроде этого?

localState.js 

export const clearState = () => {
  localStorage.removeItem('state');
}

export const loadState = () => {
  try {
    const state = localStorage.getItem('state');
    if (state === null) {
      return {};
    }

    return JSON.parse(state)
  } catch (err) {
    console.warn('%c load state error', 'color: #b00', err);
  }
};

export const saveState = (state) => {
  try {
    localStorage.setItem('state', JSON.stringify(state));
  } catch (err) {
    console.warn('%c save state error', 'color: #b00', err);
  }
};

index.js 

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers from './reducers.js';
import { clearState, loadState, saveState} from './localState.js';

const initialState = loadState();

const store = createStore(
  reducers,
  initialState,
  composeWithDevTools(applyMiddleware(...middlewares)), // not necessary, but nice for debugging
);

// save the state whenever the Redux store changes
store.subscribe(() => {
  const state = store.getState();
  if (state.user.signOut) {
    clearState();
  } else {
    saveState(store.getState());
  }
});

ReactDOM.render(
  <AppRoot store={store} />,
  document.getElementById('root')
);

Одно предостережение: если вы когда-нибудь измените схему, вы захотите сдуть сохраненное состояние, чтобы избежать странных ошибок.Или вы можете использовать управление версиями схемы.

0 голосов
/ 09 октября 2018

Если вы хотите, чтобы веб-приложение отображало пользовательские данные, вам нужно использовать какую-то базу данных.MySQL и PostgreSQL - отличные базы данных SQL.Если вы никогда не работали с базой данных SQL до того, как начать работу с MySQL.Если вы не хотите использовать базу данных SQL, вы можете использовать базу данных NoSQL, которая использует файлы .json для представления ваших данных.Существуют инструменты, которые помогут вам управлять файлами данных .json, такими как mongoDB.Обратите внимание, что если вы планируете масштабировать это приложение, то действительно большие базы данных SQL лучше подходят для использования в качестве базы данных NoSQL для создания прототипов.

Также вам понадобится хост-сервер для загрузки этих баз данных и подачи вашего контента в общедоступную сеть.,Существует множество провайдеров облачного хостинга, таких как веб-сервисы Amazon, Microsoft Azure, Google Cloud, Digital Ocean и Linode, чтобы назвать несколько наиболее популярных.

...