JavaScript 개체를 조각 식별자 (URL # hash)로 사용할 수있는 가장 좋은 방법은 무엇입니까?

Question

내 페이지 상태는 JSON으로 직렬화 할 수있는 JavaScript 객체로 설명 할 수 있습니다. 하지만 예를 들어, 공백과 큰 따옴표로 인해 JSON 문자열이 조각 ID에 사용하기에는 적합하지 않다고 생각합니다.

JSON 문자열을 base64 문자열로 인코딩하는 것이 현명한가요? 더 좋은 방법이 있습니까? 내 목표는 사용자가 페이지를 북마크에 추가 한 다음 해당 북마크로 돌아 왔을 때 JavaScript 조각에 window.location.hash을 읽고 그에 따라 상태를 변경하도록하는 것입니다.

Answer 1

나는 당신이 좋은 방법이라고 생각합니다. 의 요구 사항을 적어 보자

1. 인코딩 된 문자열, 해시로 사용할 수 즉 문자와 숫자 만해야합니다.
2. 원래 값을 복원 할 수 있어야합니다. 즉, 해싱 (md5, sha1)은 옵션이 아닙니다.
3. 사용할 수 있도록 너무 길지 않아야합니다.
4. JavaScript로 구현되어야하므로 브라우저에서 생성 할 수 있습니다.

Base64는 훌륭한 해결책이 될 것입니다. 유일한 문제 : base64에도 - 및 +과 같은 문자가 포함되어 있으므로 JSON 문자열 (URL도 인코딩해야 함)을 첨부하는 것과 비교하면 아무 것도 이기지 않습니다.

하지만 다행히도 여러분이 필요로하는 바로 base64의 변종은 base64url입니다. 그것은 당신이 묘사하고있는 문제의 유형을 위해 특별히 고안되었습니다.

그러나 JS 구현을 찾을 수 없었습니다. 어쩌면 당신 자신을 직접 써야 할지도 모릅니다. 아니면 처음 5 개의 Google 검색 결과를 검색하는 반 시간짜리 15 초보다 더 많은 조사를해야합니다.

편집 : 두 번째 생각에, 나는 독자적인 구현을 작성할 필요가 없다고 생각합니다. 일반적인 구현을 사용하고 단순히 "금지 된"문자를 URL에 적합한 것으로 바꾸십시오.

Answer 2

Base64는 바이너리 데이터를 텍스트로 저장하는 훌륭한 방법입니다. 원래 데이터보다 33 % 더 많은 문자/바이트를 사용하며 주로 0-9, a-z 및 A-Z을 사용합니다. 또한 URL에 인코딩하기 위해 인코딩해야하는 세 가지 다른 문자가 있습니다 (/, = 및 +). URL 인코딩을 사용했다면 크기가 300 % (3x)가됩니다.

URL 단편에 문자를 저장하는 경우 base64로 인코딩 된 텍스트는 다시 인코딩 할 필요가 없으므로 변경되지 않습니다. 그러나 실제 URL의 일부로 데이터를 보내려면 방문하는 것이 중요합니다.

lxg에서 참조한 것처럼 거기에는 base64url 변형이 있습니다. 안전하지 않은 문자를 대체하여 URL에 저장하는 base64의 수정 된 버전입니다.

function tobase64url(s) { 
    return btoa(x).replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,''); 
} 
console.log(tobase64url('\x00\xff\xff\xf1\xf1\xf1\xff\xff\xfe')); 
// Returns "AP__8fHx___-" instead of "AP//8fHx///+" 

을 그리고 URL에서 base64로 문자열을 디코딩 : 당신은`=`패딩을 제거하기보다는 대체 왜

function frombase64url(s) { 
    return atob(x.replace(/-/g,'+').replace(/_/g, '/')); 
}