221217 localstorage에 저장하고 가져오기

1. 사용자 세션 데이터를 유지할 수 있다.

2. 브라우저를 닫고 다시 열 때에도 지속된다.

3. 탭을 여러개 열어도 공유된다.

4. 명시적으로 삭제될 때 까지 지속된다.

5. 변경사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다.

====>>>>> 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 만료날짜 없이 사용자 정보 데이터를 저장한다.

//밸류값 local storage에 저장하기
localStorage.setItem('name','minsoo');

//local storage에 있는 밸류값 가져오기
localStorage.getItem('name')	//'minsoo'

//local storage에 있는 밸류 값 삭제하기
localStorage.removeItem('name')	//name이라고 저장된 값 삭제
localStorage.clear()	//localStorage 비우기

 

이걸 Thunk에서 저장해야하는데 아래와 같이 한다.

//api instance
import axios from 'axios';

const api = axios.create({
	baseURL: 'http://3.34.140.51',
});

export const apis = {
	// user
	login: (id, pw) => api.post('/user/login', { username: id, password: pw }),
};


//==============================================================================

//Thunk
import { apis } from '../shared/api';

const setLoginDB = (id, pwd) => {
	return function (dispatch, getState, { history }) {
		apis
			.login(id, pwd)
			.then((res) => {
				setCookie('token', res.data[1].token, 7);
				localStorage.setItem('username', res.data[0].username);
				dispatch(setLogin({ id: id }));
				history.replace('/');
			})
			.catch((err) => {
				window.alert('없는 회원정보 입니다! 회원가입을 해주세요!');
			});
	};
};

api instance를 활용하여 login이라는 절차가 끝난 후 res값을 적절해 localStorage에 저장한 모습이다.