localStorage 가 뭐지?
- 웹 스토리지 객체(web storage object)이다.
- 브라우저의 기본 API 이다.
localStorage를 사용하면, 페이지를 새로 고침해도 데이터가 사라지지 않고 남아있게 할 수 있다.- 데이터를 7일까지 저장할 수 있다.
웹 스토리지는 또 먼데
- 웹 스토리지 안에 로컬 스토리지와 세션 스토리지가 있다.
HTML5 이전에는 서버에게 응용프로그램이 데이터를 요청할 때마다 쿠키(cookie) 라는 곳에 정보를 저장했다.
HTML5 부터 서버로 정보를 절대 전송하지 않으면서, 클라이언트에서 데이터를 저장하고 꺼내고 싶을 때 꺼내는 저장소인 웹 스토리지가 생겼다.
localStorage 사용해보기
브라우저를 새로고침하면 데이터가 날아간다.
데이터가 날아가지 않도록 브라우저의 자체 데이터 베이스에 저장할 수 있는데, 이것을 localStorage 라고 한다.
콘솔 창을 열어 localStorage.setItem("name", "pongdang") 을 입력해보자!
콘솔창 -> 애플리케이션 -> 로컬 스토리지 에 들어가면 위에 입력한 값인 "name" 이 키로, "pongdang" 이 값으로 저장된 것을 볼 수 있다.
아무리 페이지를 새로고침해도 로컬 스토리지에 있는 키와 값이 사라지지 않을 것이다.
콘솔 창을 열어 localStorage.getItem("name") 을 입력해보자!
키 "name" 의 값인 "pongdang" 이 출력됨을 알 수 있다.
| 정리
-
데이터 저장
localStorage.setItem("키", "값") -
데이터 가져오기
localStorage.getItem("키")
랜덤 고양이에 localStorage 적용해보기
저번에 만들었던 랜덤 고양이에 localStorage 를 적용해보려고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>랜덤 고양이</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const Title = (props) => {
return <h1>{props.children}</h1>;
};
const CatImg = (props) => {
return (
<div>
<img src={props.img} alt='고양이' width='400' />
</div>
);
};
const Button = ({ handleButtonClick }) => {
return (
<button type='submit' onClick={handleButtonClick} style={{ margin: "20px 0" }}>
변경
</button>
);
};
const App = () => {
const cats = [
"https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg",
"https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75",
"https://s3.ap-northeast-2.amazonaws.com/elasticbeanstalk-ap-northeast-2-176213403491/media/magazine_img/magazine_280/5-3-1.jpg",
];
const [counter, setCounter] = React.useState(1);
const [catImg, setCatImg] = React.useState(
"https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg"
);
function handleButtonClick() {
setCounter(counter + 1);
setCatImg(cats[counter % cats.length]);
}
return (
<div>
<Title>랜덤 고양이 {counter}</Title>
<Button handleButtonClick={handleButtonClick} />
<CatImg img={catImg} />
</div>
);
};
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(<App />, 여기다가그려);
</script>
</body>
</html>
새로고침을 하면 랜덤 고양이의 숫자와 이미지가 초기에 설정했던 값으로 돌아간다.
마지막으로 봤던 고양이의 사진과 랜덤 고양이의 숫자를 새로고침해도 남아있게 하기 위하여 localStorage 를 사용해보려고 한다.
- 새로고침해도 저장되어야 할 데이터
- 랜덤 고양이의 숫자
- 고양이의 이미지
랜덤 고양이의 숫자와 고양이의 이미지를 관리하던 곳은 <APP>의 handleButtonClick() 함수였다.
const App = () => {
const cats = [
"https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg",
"https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75",
"https://s3.ap-northeast-2.amazonaws.com/elasticbeanstalk-ap-northeast-2-176213403491/media/magazine_img/magazine_280/5-3-1.jpg",
];
// localStorage에 저장된 랜덤 고양이 숫자 초기값 설정
const [counter, setCounter] = React.useState(localStorage.getItem("counter"));
// localStorage에 저장된 고양이 이미지 초기값 설정
const [catImg, setCatImg] = React.useState(localStorage.getItem("catImg"));
function handleButtonClick() {
// localStorage에 랜덤 고양이 숫자 저장하기
const nextCounter = counter + 1;
setCounter(nextCounter);
localStorage.setItem("counter", nextCounter);
// localStorage에 고양이 이미지 저장하기
const nextCatImg = cats[counter % cats.length];
setCatImg(nextCatImg);
localStorage.setItem("catImg", nextCatImg);
}
return (
<div>
<Title>랜덤 고양이 {counter}</Title>
<Button handleButtonClick={handleButtonClick} />
<CatImg img={catImg} />
</div>
);
};
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(<App />, 여기다가그려);1. 랜덤 고양이의 숫자
-
데이터 저장
버튼을 누르면 랜덤 고양이의 숫자를 증가시키는 식counter + 1;을nextCounter라는 변수로 만들었다.
"counter"을 키로nextCounter을 값으로 로컬 스토리지에 저장했다.
localStorage.setItem("counter", nextCounter); -
데이터 가져오기
const [counter, setCounter] = React.useState(localStorage.getItem("counter"));
키"counter"의 값인nextCounter를 초기값으로 설정했다.
2. 고양이의 이미지
-
데이터 저장
버튼을 누르면 고양이의 이미지를 변화시키는 식cats[counter % cats.length];을nextCatImg라는 변수로 만들었다.
"catImg"을 키로nextCatImg을 값으로 로컬 스토리지에 저장했다.
localStorage.setItem("catImg", nextCatImg); -
데이터 가져오기
const [catImg, setCatImg] = React.useState(localStorage.getItem("catImg"));
키"catImg"의 값인nextCatImg를 초기값으로 설정했다.
| 실행화면
랜덤 고양이의 숫자와 이미지가 사라졌다. 어 이렇게 하면 안 된다.
위처럼 코드를 작성하면, 페이지 최초 실행 때 저장된 데이터가 없어 어떠한 데이터도 가져오지 못하여 아무것도 안 뜨게 된다.
간단하게 초기값을 다시 설정해주자!
const [counter, setCounter] = React.useState(localStorage.getItem("counter") || 1);
const [catImg, setCatImg] = React.useState(localStorage.getItem("catImg") || cats[0]);랜덤 고양이의 숫자는 기본으로 1이고, 고양이의 이미지는 cats 배열의 0번째로 초기값을 설정해주었다.
| 실행화면
변경 버튼을 누를 때마다 로컬 스토리지에 키와 값이 잘 저장된다.
페이지를 새로고침한 뒤, 또 변경 버튼을 누르면!
짜잔~ 31이 됩니다!
localStorage 로컬 스토리지로 데이터를 저장하거나 사용할 때 객체처럼 사용한 것을 기억한다.
객체의 키와 값이 모두 string 값인 것처럼 로컬 스토리지에 value를 저장할 때도 마찬가지로 string 값으로 저장한다.
그래서 3 + "1" 이 되어 31이 출력된 것이다.
만약, 숫자로 저장하고 불러오고 싶다면 값을 Number() 로 바꿔서 가져와야 한다.
너무나도 간단하게 바꾸어줄 수 있다.
const [counter, setCounter] = React.useState(Number(localStorage.getItem("counter") || 1));로컬 스토리지에 저장된 키와 값을 다 삭제해준 뒤!
다시 페이지를 새로고침 해보자!
| 실행화면
페이지를 새로고침해도 랜덤 고양이 숫자와 이미지가 저장되고, 새로고침후 변경 버튼을 누르면 숫자 뒤에 "1" 이 붙는 오류도 해결되었다.
