Как: использовать LocalStorage с React

При создании приложения React будет времена, когда вы так или иначе захотите сохранить данные. Как правило, вы используете какой -то тип бэкэнда, особенно для более конфиденциальных данных, но иногда вам просто нужно сохранить что -то локально на машине пользователей – вы можете сделать это с LocalStorage. Эта статья покажет вам, как включить LocalStorage с React

Примечание 1: В этой статье предполагается, что у вас есть общее понимание React, React Hooks и Local Storage.

Примечание 2: Вы должны использовать LocalStorage только для простых/тривиальных данных. Не храните конфиденциальные данные в LocalStorage.

Настраивать

Вот с чего мы начнем – мы создадим простой компонент, где мы покажем пользователю желанное сообщение или приветственное обратное сообщение в зависимости от того, посещали ли они сайт раньше (на этом устройстве/браузере) – которое мы Знаю, используя LocalStorage. Прямо сейчас это всегда будет показывать “первый раз?” Приветственное сообщение, так как мы еще ничего не убедили в Local Storage.

Вот наш компонент до сих пор:

// importing useState and useEffect so that we can make us of them when setting/getting
// data from localStorage
import React, {useState, useEffect} from 'react';

function App() {
 let [welcomeMessage, setWelcomeMessage] = useState("Welcome -- is it your first time? (It is, we know 👋)")

  return (
    

    {welcomeMessage}
    
  );
}

export default App;

Настойчиво местного хранения

Итак, как только пользователь посетит страницу, мы хотим вспомнить это и сообщить LocalStorage, что он официально посетил страницу хотя бы один раз. Это позволит нам приветствовать их обратно, когда они снова посещают страницу, вместо того, чтобы каждый раз видеть сообщение «впервые».

То, как мы это сделаем, используется с использованием useeffect – поэтому, как только компонент приложения будет отображаться, он будет:

• Проверьте, есть ли у LocalStorage ключ “HASSISITED”
  • Если это произойдет, это установит состояние WelcomeSessage на «Добро пожаловать!»
  • Если это не так, это создаст пару значений ключей в LocalStorage

import React, {useState, useEffect} from 'react';

function App() {

  let [welcomeMessage, setWelcomeMessage] = useState("Welcome -- is it your first time? (It is, we know 😉)")

  useEffect(() => {
    // checking if localStorage has a "hasVisited" key
    if (localStorage.getItem("hasVisited")){
        // setting the state of welcomeMessage to "Welcome back!" if it does
      setWelcomeMessage("Welcome back!")  
    } else {
        // creating the "hasVisited" key value pair in localStorage if it doesnt exist
      localStorage.setItem("hasVisited", "true")
    }
    // we are only running this useEffect on the first render of app because we passed an
    // empty array
  },[])

  return (
    

    {welcomeMessage}
    
  );
}

export default App;

Как только пользователь обновляет страницу или нарушает страницу, WelcomeSessage скажет «Добро пожаловать!»

Это очень простой пример того, как использовать LocalStorage в React. Следует иметь в виду, что LocalStorage всегда будет хранить/извлекать в качестве строк, поэтому, если вы сохраняете данные, которые не являются строкой (числа, массивы, объекты), вам придется обращать/анализировать их. Вы можете узнать больше об этом процессе, проверив мой другой пост о том, как использовать LocalStorage в целом.

Как всегда, см. Документы для получения дополнительной информации:

MDN – LocalStorage

Реактируйте – USESTATE

React – использование

Не стесняйтесь обращаться здесь или в моих социальных сетях по любым вопросам, предложениям или поздравить 👋

Оригинал: “https://dev.to/antdp425/how-to-use-localstorage-with-react-2cpn”