LocalStorage

유저의 브라우저에 정보를 저장하고 싶을 때 쓰는 공간이다.

• 사이트마다 5MB 정도의 문자 데이터를 저장가능
• object 자료랑 비슷하게 key/value 형태로 저장한다.
• 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아 있다.

문법

추가

localStorage.setItem('데이터이름', '데이터');

읽기

localStorage.getItem('데이터이름');

삭제

localStorage.removeItem('데이터이름');

array/object 자료 저장 및 사용

❗️주의
LocalStorage는 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수 없다.
강제로 저장해보면 문자로 바꿔서 저장해주는데 그럼 array/object 자료가 깨져서 저장된다.

해결방법

array/object를 JSON으로 변환해서 저장하면 된다.

• JSON.stringify()메서드 이용
  JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변한한다.

localStorage.setItem('obj', JSON.stringify({name : 'kim'}));
//"{"name":"kim"}" 저장된다.

사용

데이터를 다시 꺼내면 JSON이 나오기 때문에 변환해 주어야 한다.

• JSON.parse()메서드 이용
  JSON.parse()메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

let a = localStorage.getItem('obj');
let b = JSON.parse(a)

LocalStorage 응용

사용자가 홈 페이지에 있던 상품 리스트에 상품을 클릭하여 상세페이지로 이동하면 상세페이지에 있는 상품id를 가져와서 localStorage 항목에 추가
단, 상품id는 중복 되지 않는다.

상품id 중복을 피하기 위해 indexOf()메서드와 Set()자료형을 사용하는 방법이 있다.

1. indexOf() 메서드 사용
   indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.
   indexOf() 참고자료

'watched'라는 localStorage가 존재한다고 가정

let id = useParams(); //useParams는 string 값을 반환한다.

let resultSearch = props.shoes.find(x => x.id === Number(id));

let data = localStorage.getItem('watched');
data = JSON.parse(data);

if(data.indexOf(resultSearch.id) === -1){
	data.push(resultSearch.id)
  	localStorage.setItem('watched', JSON.stringify(data))
}

2. Set() 자료형 사용
   set 객체는 중복되지 않는 유일한 값들의 집합이다.
   Set() 참고자료

'watched'라는 localStorage가 존재한다고 가정

let id = useParams(); //useParams는 string 값을 반환한다.

let resultSearch = props.shoes.find(x => x.id === Number(id));

let data = localStorage.getItem('watched');
data = JSON.parse(data);
data.push(resultSearch.id);
data = new Set(data);
data = Array.from(data);
localStorage.setItem('watched', JSON.stringify(data));

참고
Q) 모든 state를 localStorage에 자동저장 할 수 있는가?
외부라이브러리 설치하면 쉽게 구현 가능.

ex) Redux 쓰는 사람들은 redux-persist 설치하면 Redux store 안에 있던 거의 모든 state들을 localStorage에 자동저장 가능