localStorage와 sessionStorage에 문자열 데이터를 저장합니다.
localStorage는 같은 origin에서 브라우저를 닫아도 유지되고 sessionStorage는 해당 탭 세션 동안 유지됩니다. 객체는 JSON.stringify로 저장하고 JSON.parse로 복원합니다. 저장 공간 접근은 개인정보 보호 설정이나 sandbox 정책에 의해 거부될 수 있으므로 예외를 처리해야 합니다.
storage 함수는 window.localStorage를 try 안에서 읽습니다. 이 페이지의 실행 결과 창은 allow-same-origin 없이 샌드박스된 iframe이라 origin이 불투명해서, 읽는 순간 SecurityError가 나고 catch가 제한 안내를 띄운 뒤 null을 돌려줍니다. store가 null이면 두 버튼은 첫 줄에서 바로 돌아가므로, lesson-memo 키에 저장되는 모습은 일반 페이지에서 실행해야 볼 수 있습니다.
localStorage는 값을 모두 문자열로 저장해 setItem에 숫자 3을 넣어도 getItem은 문자열 3을 돌려줍니다. 같은 origin의 다른 탭에서 값이 바뀌면 window에 storage 이벤트가 발생해 key와 newValue를 알려 주지만, 값을 바꾼 탭 자신에는 이 이벤트가 오지 않습니다.
토큰, 비밀번호, 민감한 개인정보를 Web Storage에 보관하면 스크립트 공격에 노출될 수 있습니다. 저장 용량도 제한적이며 서버 데이터베이스를 대신하지 않습니다.
직접 바꿔보세요일반 same-origin 페이지와 보안 sandbox에서 저장 가능 여부가 어떻게 달라지는지 확인하세요.