Web Storage
Intro
자바스크립트 토글 사이브바 관련 과제를 하며 필요한 지식들을 정리한 내용입니다.
과제에서 요구한 내용은 어플리케이션이 재가동되거나 새로고침, 다른 페이지로 이동하더라도 사이드바의 상태가 유지되는 것입니다. 이러한 문제는 새로고침이나 뒤로가기를 하게되면 웹 페이지를 다시 불러와 랜더링을 하는데 이전의 상태정보가 유지되지 않기 때문에 발생하게 됩니다.
web storage란?
기존에는 응용 프로그램이 데이터를 서버에 요청할 때마다 매번 쿠키에 저장되었습니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다.
Web storage는 이러한 기존 쿠기의 문제점을 극복하기 위해 HTML5부터 지원되었으며, 서버단이 아닌 클라이언트단(브라우저상에서)에서 데이터를 저장할 수 있는 기술입니다.
- Local Storage
- 직접 데이터를 삭제하지 않는 한 계속 유지됩니다.- Session Storage
- 페이지 세션이 유지되는 동안 데이터가 유지됩니다.
Web storage는 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있습니다.
// 키에 데이터 쓰기 localStorage.setItem("key", value); // 키로 부터 데이터 읽기 localStorage.getItem("key"); // 키의 데이터 삭제 localStorage.removeItem("key"); // 모든 키의 데이터 삭제 localStorage.clear(); // 저장된 키/값 쌍의 개수 localStorage.length; // index에 해당하는 키 소환 localStorage.key(index)
또한 Web storage는 오직 문자형 데이터 타입만 지원을 하기 때문에 이 문제를 해결하기 위해 JSON형태로 데이터를 변환해 주고 받습니다.
localStorage.setItem('json', JSON.stringify({a: 1, b: 2})) //undefined JSON.parse(localStorage.getItem('json')) //{a: 1, b: 2}
참고자료
0seo