[React]localStorage 브라우저에 데이터 저장하기
장바구니에 추가한 데이터는 새로고침/재접속 시에 초기화가 된다. 이러한 데이터를 기억하기 위해서는 1. 서버로 보내서 데이터베이스에 저장, 2.브라우저가 가지고 있는 임시 저장공간(localStorage)에 저장한다. 이 글에서는 localStorage를 사용하는 방법에 대해 기록한다.
개발자 도구 – Application 탭 – Local Storage
Session Storage는 브라우저를 종료하면 저장된 데이터가 사라지는 휘발성 저장공간이다. Local Storage는 브라우저 청소를 하지 않는 이상 사라지지 않는다. 각각 5MB의 텍스트를 저장할 수 있다.
LocalStorage 사용하기
데이터 저장하기
localStorage.setItem(‘Key’,’Value’)
저장된 데이터 확인
데이터 출력하기
localStorage.getItem(‘Key’)
데이터 삭제하기
localStorage.removeItem(‘name’)
삭제된 데이터 확인
객체와 배열 저장하기
LocalStorage와 Session Storage에는 텍스트만 저장할 수 있기 때문에 위와 같은 방법으로 객체와 배열을 저장하게 되면 데이터가 깨지게 된다. 이러한 현상을 막기위해서는 객체와 배열의 데이터를 json 자료형으로 변경해줄 필요가 있다.
JSON.stringify()
JSON.part()
프로젝트에 적용하기
최근본상품 목록을 LocalStorage에 저장해 보자. 메인페이지에서 상품을 클릭하여 상세페이지로 이동하게 되면 해당 상품을 로컬 스토리지에 저장하는 작동 방식이다.
function Detail(props){
let { id } = useParams();
...
// 1. 상세페이지에 접속하면, 즉 Detail 컴포넌트가 로딩되면...
useEffect(()=>{
// 2. localStorage의 데이터를 꺼낸다.
var myArr = localStorage.getItem('watched');
// 최초 접속시 localStorage에 데이터가 없을 경우 새로운 배열을 생성한다.
// ( 혹은 사용자 모두에게 watched 자료형를 localStorage에 넣는 방법도 있다.)
if(myArr == null){
myArr = [];
}else{
// myArr에서 자료를 꺼내 따옴표를 제거하고 다시 myArr에 저장한다.
myArr = JSON.parse(myArr);
}
// 3.현재 상품 id를 myArr에 저장한다.
myArr.push(id);
// 4.중복된 데이터를 넣지 않는 set 자료형에 myArr를 담아 중복을 제거한다.
myArr = new Set(myArr);
// 중복 제거된 set 자료형의 myArr를 일반 배열로 변경한다.
myArr = [...myArr];
// 5.localStorage에 데이터를 JSON 자료형으로 저장한다.
localStorage.setItem('watched', JSON.stringify(myArr));
},[]);
...
최근본상품 목록 UI 만들기
Detail.js
function Lasted(props){
let history = useHistory();
var myArr = localStorage.getItem('watched');
myArr = JSON.parse(myArr);
return(
<div className="lasted">
<h3>최근본상품 목록</h3>
{
myArr.map((a,i)=>{
return (
<div className="row" shoes={props.shoes[i]} i={i} key={i} onClick={()=>{history.push('/detail/'+props.shoes[a].id)}}>
<img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes[a].id+1)+".jpg"} width="100%" alt="이미지"/>
<h5>{props.shoes[a].title}</h5>
<p>{props.shoes[a].price}</p>
</div>
)
})
}
</div>
);
}
Detail.scss
.lasted {
width: 300px;
height: auto;
background-color: rgb(235, 217, 199);
position: fixed;
top: 30px;
right: 30px;
}
.lasted h3 {
height: 70px;
line-height: 70px;
border-bottom: 1px solid #eee;
}
.lasted img {
width: 90%;
margin: 10px auto;
border-radius: 10%;
}
.lasted h5 {
height: 40px;
line-height: 40px;
}
