LocalStorage & SessionStorage

1. LocalStorage

• 데이터를 서버에 저장 및 전송하지 않고, 브라우저에 저장합니다.

• HTML5부터 사용가능

• cookie 는 4 kb 가 최고 용량이지만, localstorage는 2.5 ~ 5 mb 까지 저장 가능합니다.

• localStorage의 storage 이름에 제약은 없습니다.

• localStorage는 string만 저장할 수 있습니다.

JS 객체로 저장할 필요가 있는경우, JSON.stringify()  를 이용합니다. 
다시 JSON을 객체로 사용하기 위해서는 JSON.parse()  를 이용하여 변경합니다.

// storage에 값을 set 합니다.
localStorage.setItem("lastname", "Smith"); 
localStorage.test = '123';

// storage에서 값을 get 합니다.
localStorage.getItem("lastname");
localStorage.getItem()  // 전체 값 불러오기

// 저장된 값을 모두 제거합니다.
localStorage.removeItem('test')
localStorage.clear()    // 전체 값 삭제

2. SessionStorage

• '세션'을 기준으로 데이터가 저장 및 유지되기 때문에 이 객체에 저장된 값은 일시적인 수명을 가진다.

• 세션이 종료될 경우 브라우저를 닫거나 일정시간 아무런 동작이 없을경우) 저장된 값은 삭제된다.

• 데이터가 삭제되지 않길 바랄경우 localStorage를 사용하는 것이 좋다.

• 메서드는 localStorage와 동일하게 갖는다.

 

LocalStorage 와 sessionStorage 비교

	localStorage	sessionStorage
공통점	저장공간으로 사용할 수 있음
차이점		세션이 종료되면 데이터도 함께 사라짐