웹을 만들면서 간단한 기능을 구현할 때, 굳이 백으로부터 요청을 보내서 다시 데이터를 받아오는 절차들을 거치지 않고도 프론트엔드에서 한번에 처리할 수 있는 방법이 있는지 고민해본 적이 있으신가요?🤔
예를 들면, '오늘 하루종일 보지 않기'라는 박스를 체크하면 더 이상 해당 배너가 보이지 않게끔 만들 때, 라던지요. '박스 체크 여부' 와 같은 데이터는 보안상 유출되어도 큰 문제가 없으니 브라우저 저장소에 데이터를 저장할 수 있다면 속도나 편리성 측면에서 더 좋을텐데 싶습니다.
그런데 역시나 이미 많은 사람들이 같은 불편함을 겪었는지 프론트엔드에서도 데이터를 저장하고 불러올 수 있는 방법이 있었습니다. 바로 쿠키와 웹스토리지 객체인 localStorage와 sessionStorage라는 것을 이용하는 것입니다.
👉cookie 바로가기
본 글은localStorage와sessionStorage의 사용 방법에 관한 기본적인 내용이 담겨 있습니다.
window.localStorage란?
window.localStorage는 브라우저 안에 데이터를 저장시켜주는 웹 스토리지 객체입니다. 이렇게 한번 저장하게 되면 url경로는 달라도 domain, port, protocol 등의 오리진만 동일하다면 데이터를 저장하고 불러오는 것이 가능해집니다.
window.sessionStorage란?
sessionStorage 또한 브라우저에 키-값 쌍을 저장할 수 있도록 도와주는 웹 스토리 객체입니다. 하지만 localStorage에 비해 사용 범위가 제한적이라 자주 사용하는 편은 아니라고 합니다.
localStorage는 만료기한이 없는 반면sessionStorage는 만료기한이 있습니다. 즉, localStorage는 브라우저나 OS를 재시작하더라도 데이터가 계속 유지되지만, sessionStorage는 브라우저나 OS를 종료하면 데이터가 사라집니다. (새로 고침은 유지됩니다)
그리고 sessionStorage는 브라우저 탭에도 종속되기에 페이지를 두개 열더라도 오리진이 같은 브라우저 탭에서만 key와 value값을 확인할 수 있습니다. (다른 탭에서는 해당 데이터가 저장되어 있지 않으므로 null이 뜨게 됩니다.)
📖프로퍼티&메서드
둘의 프로퍼티와 메서드는 동일하기에 사용법은 비슷합니다.
- setItem(key, value)
: 현재 위치한 브라우저의 storage 객체에 접근하여 저장할 데이터 항목 추가
localStorage.setItem('username', 'Kate');
sessionStorage.setItem('age', '12');- getItem(key)
: 추가된 항목을 읽어옴
const name = localStorage.getItem('username');
const age = sessionStorage.getItem('age');localStorage와 sessionStorage의 key와 value는 문자열로만 저장되기 때문에 만약 데이터 타입이 객체 또는 배열일 경우엔 이를 문자열로 변환해서 저쟝해야 합니다. 반대로 값을 가져올 때는 이를 다시 문자열로 변환시켜줘야 합니다. 객체나 배열을 문자열로 변환해줄 때는 JASON.stringify()을, 문자열을 객체나 배열로 변환해줄 때는 JASON.parse() 함수를 사용해주면 됩니다.
const user = {
username: "Kate",
age: 20,
height: "180cm",
}
localStorage.setItem('user1', 'user');
localStorage.setItem('user2', JASON.stringify('user'));
const user1 = localStorage.getItem("user1");
const user2 = JSON.parse(localStorage.getItem("user2"));
console.log(user1.username) // null
console.log(user2.username) // Kate- removeItem(key)
: 특정 항목 제거
localStorage.removeItem('user1');
// user1은 삭제, user2는 남음- clear()
: 항목 전체 제거
localStorage.clear();
//user1와 user2 모두 삭제- length
: 항목 갯수 구하기
localStorage.setItem('fruit1', 'apple');
localStorage.setItem('fruit2', 'banana');
const length = localStorage.length;
console.log(length) // 2- key(index)
: key 불러오기
localStorage.setItem('fruit1', 'apple');
localStorage.setItem('fruit2', 'banana');
const key0 = localStorage.key(0);
const key1 = localStorage.key(1);
console.log(key0, key1) // fruit1, fruit2
const fruits = {
fruit1: localStorage.getItem(key0),
fruit2: localStorage.getItem(key1),
}
console.log(fruits)
/**
fruits: {
fruit1: apple,
fruit2: banana,
}
*/- object.keys()
: localStorage의 모든 key 항목 조회하기
*단, 이 함수는 IE9 이상에서만 작동하므로 IE8이상에서 해당 함수를 사용할 경우엔 다른 방법으로 해야 합니다.
localStorage.setItem('fruit1', 'apple');
localStorage.setItem('fruit2', 'banana');
const fruits = Object.keys(localStorage);
console.log(fruits)
/**
fruit1, fruist2
fruit1: apple
fruit2: banana
*/
브라우저에 데이터가 잘 저장되어 있는지 확인하기
브라우저에서 localStorage에 데이터가 잘 저장되어 있는지 확인하고 싶을 때는 어떻게 할까요?
아래 예시 사진처럼 "검사(F12) > Application > Storage > localStorage"로 들어가면 됩니다.
예시 사진에서는 key와 value 값이 비어 있지만, setItem()을 통해 값을 추가해주면 항목이 하나 생성됩니다.
💡cookies와 localStorage& sessionStorage 차이
쿠키라는 것이 있는데 왜 스토리지를 이용할까요?🤔
HTML5가 나오기 전에는 사실 쿠키로 사이트 방문객들의 정보들을 저장해왔다고 합니다. 하지만 HTML5가 나온 이후로 많은 부분들이 localStorage와 sessionStorage로 대체되고 있습니다. 쿠키와 달리 localStrage와 sessionStorage는 HTTP 요청에서 데이터를 주고받을 필요가 없어 쿠키를 이용할때보다 클라이언트와 서버간의 전체 트래픽과 데이터 전송 과정 중에서 낭비되는 부분을 많이 줄여주기 때문입니다.
이뿐만이 아니라 쿠키는 데이터를 보율할 수 있는 양이 4KB인 반면, localStorage와 sessionStorage는 최대 5MB의 정보를 저장할 수 있습니다. 보다 더 많은 양을 저장할 수 있는 것이지요.
하지만 보안에는 취약🚨
브라우저에 접근한 모든 유저가 저장된 데이터를 열람할 수 있기 때문에 보안에 취약합니다. 그래서 애초에 보안상 위협 수준이 낮은 데이터를 저장하는 용도로 이용하는 것이 좋습니다. 만약 개인정보 같은 민감한 데이터를 로컬이나 세션 스토리지에 잠시 저장해야 하는 상황이 생기면 데이터를 암호화 하는 방식으로 저장하는 등 보안을 강화해야 합니다.
