[Javascript] 페이지 이동 후에도 값 유지하기

자바스크립트 변수에 저장해둔 값을 페이지 이동 후에도 이용하고 싶을 때가 있다.

var something = ... 방식으로 저장해둔 값은 페이지 이동 후에는 사라지기 때문에 다른 방식을 이용해야 한다.

이 경우 쿠키를 이용하는 것이 일반적으로 알려져 있지만, 그 외에도 다른 방법을 찾아보았다.

1. window.localStorage

브라우저를 재실행해도 값을 유지하는 저장방식이다.

이 점이 장점으로 작용하는 경우도 있겠지만, 나는 그 장점에 비해 단점이 더 크다고 생각한다.

페이지를 보여주는 것이 자바스크립트의 역할이라는 점을 고려했을 때, 브라우저를 재시작해도 유지되는 변수는 자바스크립트 단에서 건드리지 않아야 한다는 것이 내 생각.

그래도 일단은 방법을 정리해둔다.

// 변수의 저장
var myName = "KDH";
localStorage.setItem("myName", myName);

위 방법으로 "myName" 키에 대해 "KDH"라는 값을 저장해둘 수 있다.

// 변수 불러오기
var loadedName = localStorage.getItem("myName");

위 방법으로 loadedName 변수에 "KDH"라는 값을 넣어줄 수 있다.

해당 Key에 대해 저장된 값이 없을 경우, null 이 반환된다.

String 값만 저장할 수 있다.

하지만 JSON.stringify JSON.parse 등의 방법을 이용하면 String 형태로 여러 값을 쉽게 저장 가능하다.

2. window.sessionStorage

브라우저를 닫으면 값이 지워지는 저장방식이다.

sessionStorage는 서버 세션을 이용하기 때문에, 서버에서 불러온 페이지에서만 이용 가능하다.

즉, 바탕화면에 html 파일을 만들고 <script>태그 내부에서 sessionStorage를 불러오면 값을 저장할 수 없다.

localStorage와 사용방법은 같다.

// 변수의 저장
var myName = "KDH";
sessionStorage.setItem("myName", myName);

위 방법으로 "myName"키에 "KDH"를 저장할 수 있다.

// 변수 불러오기
var loadedName = sessionStorage.getItem("myName");

위 방법으로 loadedName 변수에 "KDH"를 넣어줄 수 있으며, String값만 저장할 수 있다.

3. window.name

탭을 닫으면 값이 지워지는 저장방식이다.

(탭을 닫는다 ⊆ 브라우저를 닫는다) 이기 때문에, 브라우저를 닫을때는 물론 지워진다.

다른 도메인과 연결된 탭에서도 값을 가져올 수 있다는 것이 특징이다.

동일한 도메인에 연결한 페이지에서만 값을 저장/호출 가능한 sessionStorage와의 큰 차이점.

값을 key-value쌍으로 저장하는 것이 아니기 때문에 부족하게 느껴질 수 있지만 세 가지 방법 중에서 데이터의 휘발성이 가장 강하기 때문에 이 방식을 사용하는 편이다.

// 값의 저장
window.name = "KDH";

위 방법으로 "KDH"를 저장할 수 있다.

// 값 불러오기
var loadedName = window.name;

위 방법으로 loadedName 변수에 "KDH"를 넣어줄 수 있다.

소름돋게 간단하다(?).

개발자와 코더 사이