Local Storage를 React와 함께 사용하시겠습니까?

Local Storage를 React와 함께 사용하시겠습니까?

지금까지 제가 경험한 바로는 리액트는 아닌 것 같아요.JS는 localStorage 상태로 갱신됩니다.아래는 내 코드입니다.

var Frr = React.createClass({
getInitialState: function(){
return { lights: localStorage.getItem('state')}
},

switchoff: function(){
this.setState({lights: localStorage.setItem('state', 'off')}); 
},

switchon:function(){
this.setState({lights: localStorage.setItem('state', 'on')}); 
},

render:function(){
if (this.state.lights === 'on'){ return (
<div>
<p>The lights are ON</p>
<input type="submit" value="Switch" onClick={this.switchoff}/>
</div>
);}

if ( (this.state.lights === 'off')|| (!this.state.lights) ){ return (
<div>
<p>The lights are OFF</p>
<input type="submit" value="Switch" onClick={this.switchon}/>
</div>
);}


}
});

심플한 어플리케이션로컬 저장소의 상태가 꺼져 있거나 비어 있는 경우 ON 버튼을 사용하여 보기를 렌더링합니다.로컬 스토리지가 켜져 있는 경우 OFF 버튼으로 보기를 렌더링합니다.

localStorage 상태를 기반으로 이 렌더링을 설정할 수 있으면 좋겠습니다.기본적인 부란을 사용하여 같은 동작을 시도했는데, 예상대로 동작합니다.그러나 localStorage를 사용할 때는 뭔가 작동하지 않는 것 같습니다.

내 논리가 틀려도 나는 놀라지 않을 것이다.

편집: 설명하자면 버튼과 뷰가 제대로 작동하지 않습니다.표시등이 꺼지고 저장소에 아무것도 없는 경우 버튼을 누르면 local스토리지에 ON이 추가되지만 보기는 변경되지 않습니다.페이지를 새로 고치면 페이지가 ON으로 렌더링되고, 클릭하면 버튼이 꺼짐으로써 작동합니다.하지만 한 번만 작동하기 때문에 OFF 스위치에 문제가 있을 수 있습니다.

그.setItem()로컬 스토리지 함수가 반환됨undefined. 로컬 스토리지 업데이트를 수행한 후 새 상태 개체를 반환해야 합니다.

switchoff: function(){
    localStorage.setItem('state', 'off');
    this.setState({lights: 'off'}); 
},

다음은 또 다른 예시입니다.

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
    var storedClicks = 0;

    if (localStorage.getItem('clicks')) {
      storedClicks = parseInt(localStorage.getItem('clicks'));
    }

    this.state = {
      clicks: storedClicks,
    };
    this.click = this.click.bind(this);
  }

  click() {
    var newclick = this.state.clicks + 1;
    this.setState({clicks: newclick});
    // Set it
    localStorage.setItem('clicks', newclick);
  }

  render() {
    return (
      <div>
        <h2>Click the button a few times and refresh page</h2>
        <button onClick={this.click}>Click me</button> Counter {this.state.clicks}
      </div>
    );
  }
}
export default App;

다음 4가지 방법을 사용할 수 있습니다.

// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();

please reactjs-local storage 사용

import {reactLocalStorage} from 'reactjs-localstorage';

reactLocalStorage.set('var', true);
reactLocalStorage.get('var', true);
reactLocalStorage.setObject('var', {'test': 'test'});
reactLocalStorage.getObject('var');

localStorage를 사용해야 할 시기에 대한 추가 정보와 함께 이 질문에 대한 글을 작성했습니다.

https://levbuchel.com/react-localstorage/

---

원답:

데이터는 키와 값의 쌍으로 결정 및 저장됩니다.

이러한 값을 추가, 취득 및 삭제하는 예를 다음에 나타냅니다.

// Add items
localStorage.setItem("theme", "dark");
localStorage.setItem("zoom", "5");
localStorage.setItem("font", "18");

// Get an item
var userTheme = localStorage.getItem("theme");

// Remove an item
localStorage.removeItem("theme");
localStorage.removeItem("font");

use-local-storage-state를 사용할 수 있습니다.local Storage를 다룰 때 모든 엣지 케이스를 처리하는 것은 실제로 어렵습니다.

저는 1년 전에 도서관을 만들어서 계속 유지하고 있어요.

리액트/타입스크립트/로컬 스토리지

localStorage를 사용하여 보다 재미있게 작업할 수 있도록 후크를 만들 수 있습니다.

import { useEffect, useState } from 'react';

export const useLocalStorage = (storageKey: string, fallbackState: any) => {
  const [value, setValue] = useState<any>(fallbackState);
  const [error, setError] = useState<any>();

  useEffect(() => {
    try {
      const getItemValue = JSON.parse(
        localStorage.getItem(storageKey) as string
      );
      if (getItemValue) {
        setValue(currentValue);
      }
    } catch (e) {
      setError(e);
    }
  }, [storageKey]);

  useEffect(() => {
    try {
      localStorage.setItem(storageKey, JSON.stringify(value));
    } catch (e) {
      setError(e);
    }
  }, [fallbackState, storageKey, value]);

  return { value, setValue, error };
};

사용.

const defaultValue = {
  name: 'John Doe',
  location: 'New York',
}

const {
  value
  setValue
  error,
} = useLocalStorage('local-storage-key', defaultValue);

value키의 현재 localStorage 값이 포함되어 있습니다.local-storage-key.

사용할 수 있습니다.setValue새로운 가치를 설정하다

그리고.error에서 반환된 모든 오류를 반환한다.catch낚싯바늘에 걸려서

const { data } = response;

const userData = data.user;
// Token Save to local Storage

const access = JSON.stringify(data.tokens);
const refresh = JSON.stringify(data.tokens);

localStorage.setItem('accessToken', access);
localStorage.setItem('refreshToken', refresh);

언급URL : https://stackoverflow.com/questions/38423108/using-localstorage-with-react