URL에 데이터 저장하기

URL 자체에 데이터를 저장할 수 있다.

URL에 데이터를 저장하는 서비스를 찾았다.

TypeScript 코드를 입력하고 결과를 바로 확인하는 서비스를 사용하고 있다.

https://www.typescriptlang.org/play

코드를 입력하고 브라우저 새로 고침을 해도 입력하던 코드들이 남아 있어서 북 마크하고 계속 코딩했는데 다음날 저장했던 북 마크를 클릭했더니 어제 북 마크했던 시점까지의 코드만 남아 있었다. 그 이후의 코드는 사라졌다. 혹시나 해서 코드를 모두 지우고 에디터 포커스를 다른 곳으로 옮기니 길던 URL이 아래처럼 짧아졌다.

https://www.typescriptlang.org/play?#code/Q

LocalStorage, SessionStorage, IndexedDB를 살펴보아도 점점 커지는 데이터를 발견할 수 없었다. 점점 걸어지는 URL이 코드를 포함한다고 생각했다. 코드를 입력할수록 URL ‘#code’ 뒤의 문자열이 점점 길어지는 것을 확인할 수 있다. # 뒤에 URL은 서버에 전달되지 않으니 이 값을 키로 사용하여 브라우저의 주소 입력란이나 북 마크 링크에 코드를 저장하는 방식이다. # 뒤의 문자열이 저장되는 window.location.hash에 코드를 넣고 있다.

16780 문자 이상은 저장할 수 있다.

위의 서비스라면 저장 가능한 최대 코드 크기는 브라우저가 지원하는 URL 길이에 의존한다. 시험 삼아 코드 대신 아래 문장을 10000 줄을 채워봤다.

// Welcome to the TypeScript Playground, this is a website

그러자 URL 길이가 16780 문자가 되었다. 북 마크한 후 새로운 탭에서 이 북 마크로 이동했을 때 10000 줄 주석이 그대로 나타남으로 약 16k 문자 저장하는 데는 문제없다. 우분투에서 크롬(버전 94.0.4606.71) 브라우저를 사용하고 있다.

테스트 코드

작은 코드로 window.location.hash에 좀 더 많은 데이터를 넣어 보았다.

let count = 100
while (count--) {
  const prevLength = window.location.hash.length
  window.location.hash += 'aaaaaaaaab'.repeat(100).repeat(100)
  if (prevLength === window.location.hash.length) break;
}
console.log('hash.length', window.location.hash.length) // 10021606

10021606 (약 10M) 글자를 저장할 수 있었다. JavaScript 메모리 한계까지 저장할 수 있다고 추정한다. 이런 방식으로 데이터를 입력하는 것이 신기하다.