Javascript 페이지간 데이터 전달하기

Javascript를 활용해서 페이지를 이동하는 경우가 있습니다.

 

 

예를들면,

 

home.html -> about.html 로 페이지를 이동하는 경우가 있습니다.

 

일반적인 방법으로 페이지가 이동해서 데이터를 받아온다면, 분명 서버로 이동해서 데이터를 요청해서 받으면 될 것 같지만, 사실 서버에 저장을 할 필요가 없는 경우도 있겟죠?

 

이럴 때 아주 유용하게 사용 할 수 있는 방법은 뭐가 있을까요?

 

---

이번에 알아본 데이터 전달하는 방법은

STEP 1. LocalStroage 사용하기 (보내는 페이지)

 

LocalStroage를 활용해서 데이터를 전달하는 겁니다.

아래와 같이 localStrorage객체를 활용해서, Setitem이란 함수를 호출해주시면 됩니다.

localStorage.setItem('키','값');

 

STEP 2. LocalStroage 데이터 값 읽어오기

이제 이동하는 페이지에서 데이터를 읽어와야합니다.

아래와 같은 형태로 간단히 값을 읽어 올 수 있습니다.

if(localStorage.getItem('키')){
 var lastData = localStorage.getItem('키')
}

 

조금 더 멋지게 데이터를 보내보기

위 방식으로도 충분히 멋진 데이터를 보낼 수 있지만,

데이터의 양이 많다면? 여러가지 데이터라면?

 

 

어떻게 데이터를 보내는게 좋을까요?

 

 

localStorage.setItem('키1','값');

localStorage.setItem('키2','값');

localStorage.setItem('키3','값');

localStorage.setItem('키4','값');

....

 

 

이런 형태로??

 

 

 

저는 개인적으로 Json 형태로 데이터를 보내면 아주 멋질 것 같습니다.

 

var cast = {
    "이름" : "홍길동",
    "나이" : "28",
    "생년월일" : "2002",
    "취미" : "농구",
    "폰번호" : "0101100203",
    "기타" : "~~"
};

// Json Object를 저장하기
localStorage.setItem("cast", JSON.stringify(cast));

 

이제 데이터를 받아야겠죠?

 

JSON.parse(localStorage.getItem("cast"));

 

 

이러면 조금 더 많은 데이터도 멋지게 구현할 수 있을 것 같습니다.