로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다.
간단한 키와 값을 저장할 용도로 사용된다.
둘의 차이는 데이터의 영구성이다.
로컬스토리지에서 데이터는 사용자가 지우지 않는 한 유지된다.
반면 세션스토리지에서 데이터는 윈도우나 브라우저탭을 닫을 경우 손실된다.
두 스토리지는 모두 window객체에 존재한다.
로컬 스토리지와 세션 스토리지의 저장 용량
로컬 스토리지의 표준 스펙에서는 5MB를 최대 용량으로 권장하고 있다
앞서 말한대로, 세션 스토리지는 웹 페이지의 세션이 끝날때 저장되었던 데이터가 지워지는 반면에, 로컬 스토리지는 웹 페이지의 세션이 끝나도 데이터가 지워지지 않는다.
하지만 같은 컴퓨터에서 같은 브라우저를 쓸때만 로컬 스토리지는 유효하다.
컴퓨터를 새로 바꾸는 경우, 같은 컴퓨터에서 다른 브라우저(크롬,파이어폭스)를 사용하는 경우 엄연히 다른 데이터이므로 각각의 로컬 스토리지가 존재할 것이다.
로컬 스토리지 API
웹 스토리지는 키와 값을 갖는다.
데이터 쓰기
localStorage.setItem('test', 1);
데이터 읽기
localStorage.getItem('test')
키의 데이터 제거
localStorage.removeItem('test');
모든 키의 데이터 제거
localStorage.clear();
저장된 키/값 쌍의 개수
localStorage.length;
로컬 스토리지를 쓸 떄 주의해야 할 점
localStorage의 키는 반드시 문자열이여야 합니다.
그래서 객체를 로컬 스토리지에 저장하고자 할떄 다음의 방법이 자주 사용됩니다.
JSON.stringify( object name )
이 방법은 객체를 문자열 형태로 바꿔주기 때문에 유용하게 사용할 수 있습니다.
ex_)
localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
배열도 마찬가지 방식으로 이용 가능합니다.
ex_)
localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
