어제 메모 페이지에 ‘내일 3시에 회의’라고 적고 탭을 닫았습니다. 오늘 다시 열었더니 그 문장이 그대로 있습니다. 나는 적어 둔 것도 잊었는데, 이 페이지는 어떻게 기억하고 있었을까요?

탭을 닫는 것과 그 사이트가 브라우저에 남긴 데이터를 지우는 것은 같은 일이 아닙니다. 페이지가 다음번에 꺼내 읽을 자리에 메모를 남겨 두었다면, 다시 열어도 보여 줄 수 있습니다.
기억하기를 누르고, 새로고침해 보세요
아래는 고정 문장 하나만 저장하는 예시입니다. 먼저 ‘이 브라우저에 기억하기’를 누른 뒤 새로고침해 보세요. 저장을 허용하는 환경이라면 같은 메모가 다시 나타납니다.
저장할 고정 예시 · 내일 3시에 회의
저장 상태를 확인하는 중입니다.
JavaScript가 실행되면 저장 상태를 확인합니다.
이 예시는 ‘내일 3시에 회의’라는 고정 문장만 이 브라우저에 저장합니다. 자유 입력과 서버 전송은 없습니다. 저장이 차단되면 실패 안내를 보여 줍니다. ‘지우기’는 이 예시의 메모만 삭제합니다.
새로고침은 페이지를 다시 불러옵니다. 방금 저장한 문장까지 지우지는 않습니다. 이번에는 ‘예시 메모 지우기’를 누르고 다시 새로고침해 보세요. 저장된 메모가 없는 상태로 돌아갑니다.

물론 위 버튼이 브라우저의 모든 기억을 지우는 것은 아닙니다. 이 예시가 저장한 메모 하나만 지웁니다. 다른 사이트의 데이터나 내 파일을 지우는 버튼이 아닙니다.
페이지 밖에 남겨 둔 작은 메모
위 예시가 쓰는 기능은 localStorage입니다. 웹사이트가 브라우저 쪽 저장 공간에 이름과 값을 짝지어 남겨 두는 방법입니다. 이 예시는 정해진 이름 하나에 메모 한 문장을 넣고, 다음에 열릴 때 그 이름으로 다시 읽습니다.[1]
화면에 문장이 보인다는 사실만으로 저장이 끝난 것은 아닙니다. 페이지가 저장하는 코드와 다시 읽어 보여 주는 코드를 갖고 있어야 합니다. 그래서 위 예시도 버튼을 누르기 전에는 메모를 새로 저장하지 않습니다.
localStorage는 일반적으로 브라우저를 닫고 다시 열어도 남을 수 있습니다. 탭의 세션이 끝나면 사라지는 sessionStorage와는 이 점이 다릅니다.[2] 다만 모든 사이트의 메모 복원이 localStorage 때문인 것은 아닙니다. 서버에서 다시 가져오거나 다른 저장 기능을 쓰는 페이지도 있습니다.
내 노트북에서 보인다고, 휴대전화에도 있을까?
이 예시는 이 사이트를 연 같은 브라우저·프로필의 저장 공간을 사용합니다. 다른 브라우저나 다른 기기로 옮긴다고 자동으로 따라오는 메모장이 아닙니다. 기기 사이에 맞춰 주려면 사이트가 별도의 동기화 기능을 마련해야 합니다.
저장 공간은 사이트 주소의 출처(origin)를 기준으로 나뉩니다. 여기서 출처는 프로토콜·호스트·포트의 조합입니다. 예를 들어 같은 주소 이름이어도 HTTP와 HTTPS는 서로 다른 저장 공간을 사용합니다.[1]
‘내 브라우저에 남는다’가 ‘영원히 안전하게 보관된다’는 뜻도 아닙니다. 브라우저의 사이트 데이터 삭제로 없어질 수 있고, 비공개 창에서는 마지막 비공개 탭을 닫으면 지워집니다. 설정에 따라 저장 자체가 막힐 수도 있습니다.[1] 비밀번호나 중요한 원본을 믿고 맡기는 금고로 생각하면 안 됩니다.[3]
오늘은 ‘남았다’ 다음을 확인하기
- 저장 버튼을 누른 뒤 다시 열어도 남는지 확인합니다.
- 다른 기기에서도 필요하다면 동기화나 내보내기 기능이 있는지 봅니다.
- 중요한 내용은 브라우저에만 두지 말고 별도로 보관합니다.
탭을 닫았는데 문장이 남아 있다고 브라우저가 눈치껏 외운 것은 아닙니다. 페이지가 남겨 둔 데이터를 다시 읽어 보여 준 겁니다. 어디에 남겼는지를 알면, 무엇을 지우면 없어지는지도 조금 더 분명해집니다.
메모 페이지와 회의 일정은 가상 상황입니다. 원본 영화 장면은 기억이 안 나는 반응의 비유이며 실제 브라우저 동작을 보여 주는 영상은 아닙니다.