웹 스토리지 localStorage, sessionStorage, cookie 비교
로컬 스토리지 ( localStorage ) 서버가 아닌 브라우저에 데이터를 저장하여 서버에 불필요하게 데이터를 저장하지 않을 수 있다. 로컬 스토리지 저장용량 Opera -> 5MB Safari -> 5MB FireFox -> 10MB Chrome -> 출처 당 10MB Internet Explorer -> 저장 영역 당 5MB localStorage, sessionStorage, cookie 중 저장 용량 한도가 제일 크다. 데이터를 브라우저에 반영구적으로 저장하며 브라우저를 닫더라도 데이터가 유지된다. 하지만 도메인(domain)이 다른경우에는 로컬 스토리지에 접근할 수 없다. (google.com에 저장한 localstorage를 naver.com에서 사용할 수없다.) localStorage는 key와 value 값을 받는데 key 값은 호출할 때 사용되며 value 값을 반환한다. * 값을 저장할 때 데이터 타입과 상관없이 무조건 문자열로 변환되어 저장되며, 값을 반환하는 경우에도 value 값은 문자열(String)이다. 추가적으로 알아두면 좋을만한 점은 객체를 저장하게되면 "[Object Object]"와 같은 형식으로 저장되는데 값을 출력해보면 데이터 값이 아닌 "[Object Object]"가 그대로 출력되어 객체를 정상적으로 사용할 수 없다. 그러므로 로컬 스토리지에 객체를 저장할때는 객체를 문자열로 바꿔 저장해야하며 문자열로 바뀐 객체를 가져와서 사용하고자 할때는 다시 객체로 바꾸어 사용해야 원래 객체를 정상적으로 사용할 수 있다. // 객체를 문자열로 변환 JSON . stringify (); // 문자열로 변환된 객체를 다시 원래 객체로 변환 JSON . parse (); - 로컬스토리지에서 사용되는 메서드 - //로컬 스토리지에 정보를 저장 localStorage . setItem ( key , value ) //로컬 스토리지에 저장된 정보를 출력 localStorage .