[HTML] 웹저장소(Web Storage)

웹저장소가 나오기 이전엔 브라우저에 데이터를 저장할땐 주로 쿠키를 사용해왔습니다. 하지만 쿠키는 브라우저 상의 갯수와 크기에 제한이 있으며, 브라우저와 서버가 통신할때 필요하지 않은 경우에도 쿠키가 같이 전송되어 불필요한 데이터 전송을 동반합니다. 이러한 쿠키의 단점을 보완할수 있는 것이 바로 웹저장소입니다.웹저장소에 저장된 데이터는 쿠키와 달리 서버로 전송되지 않습니다. 필요한 경우에는 서버로 전송도 가능합니다. 그리고 쿠키보다 더 많은 양의 데이터 저장이 가능합니다.

 

웹저장소 사용하기

웹저장소는 localStorage와 sessionStorage라는 두가지 객체를 가지고 있습니다. localStorage는 데이터의 만료날짜 없어 제거하기 전까지 데이터가 유지됩니다.sessionStorage는 브라우저 세션에 저장되는 데이터로 탭을 닫는 등 세션이 종료되면 데이터도 삭제됩니다.

 localStorage에 데이터 입력 및 출력

아이디 :      /* localStorage에 데이터 입력*/     
localStorage.setItem("storeID", "TestUser");      /* storeID 데이터 값 가져오기*/     
var loadID = localStorage.getItem("storeID");      /* name이 inputID인 인풋박스에 storeID 데이터 값 넣어주기*/     
var tInput = document.querySelector("input[name='inputID']");     
tInput.value = loadID;

 실행화면

  데이터 입력 부분인 `localStorage.setItem("storeID", "TestUser");` 이 코드를 빼고 다시 실행해보아도 아래와 같이 출력되는걸 확인 할 수 있습니다.

 

 localStorage에 데이터 삭제

     localStorage.removeItem("storeID");   

  localStorage에 저장된 데이터는 캐쉬를 삭제해도 남아있기 때문에 위 코드를 실행하여 삭제해야 합니다.