TIL 23.08.01 로컬스토리지 데이터 저장/ 조회/ 삭제

로컬스토리지에 데이터 저장하기

 

localStorage.setItem(key, value)

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState('');
  
  const handleInputChange = (event) => {
    setData(event.target.value);
  };

  const handleSaveData = () => {
    localStorage.setItem('myData', data);
    // 키-값 형태로'myData'라는 키로 데이터를 로컬 스토리지에 저장
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleInputChange} />
      <button onClick={handleSaveData}>Save Data</button>
    </div>
  );
}

export default App;

 

 

로컬스토리지에서 데이터 가져오기

 

localStorage.getItem(key)

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState('');

  const handleLoadData = () => {
    const savedData = localStorage.getItem('myData');
    // 'myData'라는 키로 저장된 데이터를 로컬 스토리지에서 가져옴
    setData(savedData);
  };

  return (
    <div>
      <button onClick={handleLoadData}>Load Data</button>
      <p>Loaded Data: {data}</p>
    </div>
  );
}

export default App;

 

로컬스토리지 데이터 삭제하기

 

localStorage.removeItem(key);