HTML Web Storage API

[berryberrybin]

웹의 취약점 : state less

• 페이지가 이동할때마다 상태 정보는 모두 사라짐
• A라는 페이지에서 사용했던 정보들 (변수, 객체.. 등)이 B페이지로 이동하면 모두 사라짐
• 필요시 get방식 이나 post 방식으로 값들을 하나하나 넘겨야 하는 번거로움이 있음

정보의 영속성을 유지하기 위한 저장매커니즘

1. Client 쪽에 저장하는 기술

• 단점 : 사용자가 직접 삭제, 보기가 가능하다.

• 종류

  • Cookie

    • 용량의 제한, 개수의 제한이 있음
    • 사용자의 요청(request)가 될때마다 서버로 쿠키를 매번 전송함
    • ex) Id 기억시키기, 사용자 트랜드 분석하기

  • HTML5에서 지원하는 WebStorage

    • 브라우저가 가지고 있는 저장소에 저장되는 것
    • 브라우저가 정보를 갖고 있기 때문에 브라우저가 바뀌면 정보는 가져올 수 없음
    • WebStorage 종류
      • Local Storage : 만료기간이 없이 삭제하지 않으면 평생 유지된다.
      • Session Storage : 세션이 유지되는 동안에만 정보가 유지된다.

        < Session이란 개념 >   
        세션이 유지되는 동안에만 정보가 유지됨
        Session이란 개념은 브러우져가 start해서 stop(완전히 닫을때)할때 까지 유지됨

2. WAS 쪽 (back-end)에 저장하는 기술

• PageContext
• Request
• Session
• Application

[berryberrybin]

HTML WebStorage

• WebStorage를 사용하면 WebApplication이 사용자의 브라우저 내에서 로컬로 데이터를 저장가능함

• HTML5 이전에는 Application 데이터가 모든 서버 요청에 포함된 cookies에 저장해야 했음

• WebStorage가 더 안전하고, 웹 사이트 성능에 영향을 주지 않고, 많은 양의 데이터를 로컬에 저장간으함

• cookies와 달리 저장 제한이 훨씬 크고(최소 5MB), 정보가 서버로 전송되지 않음

• WebStorage는 origin(domain 및 protocl 당)별로 제공됨

• 한 출처의 모든 페이지는 (All pages, from one origin) 동일한 데이터를 저장하고 액세스 가능함

localStorage 객체

• localStorage 객체는 만료 날짜 없이 데이터를 저장함
• 데이터는 브라우저를 닫아도 삭제되지 않으며 다음 날, 다음 주 또는 연도에 사용할 수 있습니다.

// LocalStorage에 저장하기
localStorage.setItem("lastname", "Smith"); 

// 저장된 값 검색하기
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

// 삭제하기
localStorage.removeItem("lastname");

/* 
name="lastname" 과 value="Smith"를 사용하여 localStorage 이름/값 쌍을 만든다.
"lastname"의 값을 검색하여 id="result"인 요소에 삽입
*/

sessionStorage 객체

• sessionStorage는 하나의 세션에 대한 데이터만 저장한다는 점을 제외 하면 하면 localStorage 객체와 동일함
• 사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제됩니다.

// 저장
sessionStorage.setItem(key, value);
//삭제
sessionStorage.removeItem(key);

[berryberrybin]