localstorage sessionstroage

html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage api를 제공한다. 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지  sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다. 그렇다면 이 메소드는 어떤 경우에 사용할 수 있을까? 쿠키, 서버저장소와 함께 서로의 장단점에 대하여 비교하며 알아보도록 하자.

 

 

쿠키의 경우 저장 가능한 공간의 크기가 가장 작고 하나의 텍스트 형태로 저장된다. 그렇기 때문에 비교적 간단한 텍스트 타입의 데이터를 저장하는데 용이하다. 이런 값으로는 팝업의 이름을 예로 들 수 있다. 팝업의 경우 24시간 동안 동작하지 않도록... 즉 열지 않도록 설정하는 경우가 많은데 이때 쿠키의 변수를 저장하고 24시간의 만료시간을 설정하는 것이 좋다.

 

서버저장소는 데이터의 동기화가 필요하기 때문에 꼭 필요한 경우가 아니라면 전송을 최소하 하는 것이 좋을 것이다. 이런 이유로 서버 저장소는 데이터의 크기가 매우 크거나 반드시 저장해야 하는 경우에만 사용된다.

 

데이터가 크기나 만료시간을 고려했을때 위 저장소의 중간 정도의 애매한 경우가 있을 수 있다. 저장소가 필요하지만 다수의 컬럼이 필요한 경우가 아니만 단순한 형태라면 localStorage, sessionStorage를 사용하는게 효과적인 방법이다.

 

! localStorage, sessionStorage를 어떤 경우에 사용할까

대부분의 데이터의 경우 데이터베이스에 저장하므로 로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않다. 대부분 임시적인 용도 또는 캐시, history 기능을 위하여 사용된다. 

• 글 작성 중간 중간에 잃어버리지 않기 위한 임시 저장용도
• 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우
• 방문자의 이동 경로를 저장하였다가 이동할 경우
• 그 외 서버에 반드시 저장할 필요가 없는 경우

 

 

 

 

https://webisfree.com/2016-06-24/[자바스크립트]-localstorage-sessionstorage-클라이언트에-정보-저장