[JAVASCRIPT] 한글 Byte 단위로 자르기. (Cookie 셋팅용)

웹브라우저에서 지원되는 쿠키의 사이즈는 아래와 같다

 

A. 쿠키 하나 당 저장 용량 : 4096 Byte

    -> 초과 시 저장 되지 않는다. getCookie 해도 빈값.

    

B. 도메인, 호스트 하나 당 최대 저장 쿠키의 갯수 : 20 개

    -> 초과 시 해당 사이트로 접속 불가. 흰 화면을 신나게 볼거에요.

    

C. 웹브라우저 최대 저장 쿠키 갯수 : 300 개

D. 웹브라우저 최대 저장 쿠키 용량: 1.2 MB

 

 

 

쿠키 저장 전의 값이 4096 byte 가 되지 않는다 하더라도 쿠키 저장 시 한글 깨짐을 대비하여

 

escape(value) 를 하기 때문에 4096 byte 를 초과 할 수가 있다.

 

그렇기 때문에 저장 전 값을 escape 해도 4096 byte 가 되지 않도록 넉넉~ 하게 byte 단위로 substring 하여야 한다.

 

예제는 아래와 같다.

 

 

 

** 쿠키 셋팅 시

/*

*    쿠키 허용 용량은 4096 byte 지만 조금 여유있게 3800 byte 로 체크

*    실제로 1개 쿠키에는 escape 전 500 byte 가 들어감.

*     (모두 한글이라고 가정 시 500 byte * 6 (escape 시 한글 한글자(%uXXXX)) = 3000 byte 로 널널하게)

*/

var cookie_value = '이것저것 한글 매우 긴글이라고 치고~';

var expire = new Date();

expire.setTime(expire.getTime() + (10 * 60 * 1000));    // 쿠키 유효시간. 현재시간부터 10 분 후 까지

 

if (escape(cookie_value).length > 3800) {    // 여유있게 3800 byte 로 체크

    var divide_cookie_values = cutStringToByte(cookie_value, 500);    // 500 byte 씩 묶는다 (escape 하지 않은 cookie_value 의 byte)

    

    if (divide_cookie_values.length > 0) {

        // 나뉘어진 cookie_value 의 쿠키 갯수

        setCookie("make_cookie_count", divide_cookie_values.length, expire, "/", ".letusgo.com", false);

        

        for (var i=0; i<divide_cookie_values.length; ++i) {

            setCookie("make_cookie _" + i, divide_cookie_values[i], expire, "/", ".letusgo.com", false);

        }

    }

 

} else {

    setCookie("make_cookie_count", 1, expire, "/", ".letusgo.com", false);

    setCookie("make_cookie_0", cookie_value, expire, "/", ".letusgo.com", false);

}

 

 

 

** 쿠키 사용 시

function getCookieValue() {

    var cookie_count = getCookie('make_cookie_count');

    var cookie_value = '';

    if ( !cookie_count ) return cookie_value;

 

    for (var i=0; i<cookie_count; ++i) {

        cookie_value += getCookie('make_cookie_' + i);

        // 쿠키 초기 화가 필요 할 시

        // setCookie("make_cookie_" + i, "", 0, "/", "letusgo.com", false);

    }

 

    // setCookie("make_cookie_count", "", 0, "/", "letusgo.com", false);

 

    return cookie_value;

}

 

 

// Set Cookie

function setCookie(name, value, expires, path, domain, secure){

    document.cookie = name + "="

        + escape(value)

        + ((expires) ? "; expires=" + expires.toGMTString() : "")

        + ((path) ? "; path=" + path : "")

        + ((domain) ? "; domain=" + domain : "")

        + ((secure) ? "; secure" : "");

}

 

// Get Cookie

function getCookie(name){

    var arg = name + "=";

    var alen = arg.length;

    var clen = document.cookie.length;

    var i = 0;

    while(i < clen){

        var j = i + alen;

        if(document.cookie.substring(i, j) == arg)

        {

            var end = document.cookie.indexOf(";", j);

 

            if(end == -1) {

             end = document.cookie.length;

            }

            return unescape(document.cookie.substring(j, end));

        }

        i = document.cookie.indexOf(" ", i) + 1;

        if(i == 0) break;

    }

    return null;

}

 

/*

*    파라미터로 받은 str 을 len 만큼 잘라서 배열로 리턴

*/

function cutStringToByte(str, len) {

    var currentLength = 0;

    var idx = 0;

    var tempIdx = 0;

    var i = 0;

    var returnArray = [];

    while (i < str.length) {

        currentLength += (str.charCodeAt(i) > 128) ? 2 : 1;

        

        if (currentLength > len) {

            returnArray[idx] = str.substring(((idx == 0) ? 0 : tempIdx), i);

            tempIdx = i;

            currentLength = 0;

            ++idx;

        }

        

        ++i;

    }

    

    returnArray[idx] = str.substring(tempIdx, i);

    

    return returnArray;

}

 

 

 

 

 

-- 아래는 위의 내용을 찾다가 발견한 소스들

* 출처 : http://www.jlancer.net/board/article_view.jsp?article_no=1079&board_no=11

 

/*

* string String::cutByte(int len)

* 글자를 앞에서부터 원하는 바이트만큼 잘라 리턴합니다.

* 한글의 경우 2바이트로 계산하며, 글자 중간에서 잘리지 않습니다.

*/

String.prototype.cutByte = function(len) {

    var str = this;

    var l = 0;

    for (var i=0; i<str.length; i++) {

        l += (str.charCodeAt(i) > 128) ? 2 : 1;

     if (l > len) return str.substring(0, i);

    }

    return str;

}

 

-> var str = "안녕하세요."; console.log(str.cutByte(5));

 

 

/*

* bool String::byte(void)

* 해당스트링의 바이트단위 길이를 리턴합니다. (기존의 length 속성은 2바이트 문자를 한글자로 간주합니다)

*/

String.prototype.byte = function() {

    var str = this;

    var l = 0;

    for (var i=0; i<str.length; i++) l += (str.charCodeAt(i) > 128) ? 2 : 1;

    return l;    

}

 

-> var str = "안녕하세요."; console.log(str.byte());

 

 

 

 

 

-- 아래는 escape(), encodeURI(), encodeURIComponent() 관련 참고.

* 출처 : http://baver.zetacode.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-escape-encodeURI-encodeURIComponent-%EC%B0%A8%EC%9D%B4

 

 

 

 

** escape ()

 

아래의 아스키문자가 아니라면 모두 유니코드형식으로 변환한다.

 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

@*-_+./

 

-> 변환된 형식은 16진수 형식으로 표시. 1 byte 문자는 %XX, 2 byte 문자는 %uXXXX

ex) 1 byte 문자 = 빈칸 -> %20

2 byte 문자 = 한글 -> %uD55C%uAE00

 

 

 

 

** encodeURI()

 

기본적으로는 escape()와 비슷한 동작을 하지만 인터넷 주소표시에 쓰이는 특수문자들을 인코딩하지 않는다.

 

: ; / = ? &

 

등의 특수문자는 인코딩이 되지 않는다.

 

인터넷주소(URL) 전체를 인코딩할 때 사용한다.

 

 

 

 

** encodeURIComponent()

 

기본적인 동작은 역시 escape()와 비슷하지만 인터넷 주소표시에 쓰이는 모든 문자를 추가로 인코딩한다.

 

: ; / = ? &

 

등의 특수문자가 추가로 인코딩 되는 것이다.

 

그래서 인터넷주소(URL) 전체를 인코딩할 때는 사용할 수 없고,

 

넘기는 필드 하나하나를 따로 인코딩할 때 사용한다.

 

 

그 이유는 넘어가는 값이 text="test=&테스트" 이와 같이 text라는 필드 값이 test=&테스트인 경우 그냥 encodeURI()로 인코딩 하면,

'=' 나 '&'는 인코딩되지 않아서 필드값을 처리할 때 데이터값이 아닌 여러개의 필드를 넘기는 명령어로 인식할 수 있기 때문이다.

 

하지만, "http://test.com/test.php?text=테스트" 와 같은 URL 전체를 encodeURIComponent()로 인코딩하게 되면 : / ? 를 모두 인코딩하여 주소를 인식할 수 없게 된다.