sessionStorage vs 전역변수 & Ajax 동기 통신

■ sessionStorage(세션스토리지) vs localStorage(로컬스토리지) vs 전역변수

 

흔히 Ajax에서 순서가 중요한 일부 트랜잭션 처리 후 페이지를 보여줘야 할 때

동기통신을 처리하곤하지만, 전역변수를 사용하기 위해 Ajax 동기통신을 하는 경우도 있다.

 

단순히 전역변수를 사용하기 위해 Ajax 동기통신을 한다면,

비동기 장점이 사라지며, 통신 중에 페이지 동작이 멈추기 때문에 별로 좋은 방법은 아니다.

따라서 전역변수를 사용하기 보단 sessionstorage 또는 localstorage를 활용하는게 더 나을 수 있다.

 

 

■ 일반적인 Ajax 비동기 방식

$.ajax({
    type: 'POST',
    url: URL,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data),
    success: function (result) {
		// 성공
    },complete: function() {
		// 성공 후 로직
    }
}).done(function () {

}).fail(function (error) {
    alert('실패했습니다.');
});

 

 

■ 일반적인 Ajax 동기 방식

$.ajax({
    type: 'POST',
    url: URL,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data),
    async: false,   // 동기 통신은 false
    success: function (result) {
		// 성공
    },complete: function() {
		// 성공 후 로직
    }
}).done(function () {

}).fail(function (error) {
    alert('실패했습니다.');
});

 

async 옵션을 false 로 주면 동기통신을 할 수 있고,

전역변수를 ajax 내부에서 활용할 수 있다.

하지만 동기통신을 하는 동안에는 동작이 멈추는 단점이 있다.

 

 

■ 전역변수 대신 sessionStorage를 통해 Ajax 비동기 통신

세션 스토리지(sessionStorage)는 웹 페이지의 세션이 끝날 때(창이 닫힐 때) 저장된 데이터도 함께 날아갑니다.

즉 페이지가 동작하는 동안에는 ajax 외부에서 특정 값을 담아 ajax 내부에서도 활용할 수 있게 됩니다. 굳이 전역변수를 위해 동기통신을 할 필요가 없게 됩니다.

 

# sessionStorage 예제

 

// 키에 데이터 쓰기
sessionStorage.setItem("key", value);

// 키로 부터 데이터 읽기
// let test = sessionStorage.getItem("key"); 
sessionStorage.getItem("key");

// 키의 데이터 삭제
sessionStorage.removeItem("key");

// 모든 키의 데이터 삭제
sessionStorage.clear();

 

 

■ sessionStorage 활용한 Ajax 비동기

sessionStorage.setItem("key", "Y"); // 전역변수처럼 외부에서 선언

function test() {
    $.ajax({
        type: 'POST',
        url: URL,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data),
        success: function (result) {
            // 성공
            let test = sessionStorage.getItem("key");  // 읽기
            if(test == "Y") {
            	sessionStorage.setItem("key", "OK");  // 값 수정
            }
        },complete: function() {
            // 성공 후 로직
        }
    }).done(function () {

    }).fail(function (error) {
        alert('실패했습니다.');
    });
}

 

 

# "무조건 웹 스토리지만 써야 하는가 ???" 는 아니다. 각각의 차이점이 있다.

 

■ sessionStorage(세션스토리지) vs global variable(전역변수)

주요 차이점은 다른 페이지로 이동하거나 현재 페이지를 다시 로드하려는 경우입니다. 

사이트 내에서도 다른 페이지로 리디렉션하거나 현재 페이지를 다시 로드하면 전역 변수가 재설정되지만 세션 저장 데이터는 재설정되지 않습니다.

 

1. 방문자가 로그인하기 전에 장바구니를 관리합니다 .

2. 사용자가 로그인하기 전에 장바구니 항목을 클라이언트 측에서 유지 관리하려고 합니다.

3. 등록 및/또는 인증할 때까지 항목을 서버에 저장하는 것은 훨씬 더 문제가 될 수 있습니다.

4. 사용자가 인증된 후에도 장바구니 클라이언트 측을 관리하면 실제로 구매가 이루어질 때까지 서버의 부하와 복잡성을 줄이는 이점이 있습니다.

5. 현재 페이지를 다시 로드해야 하는 경우 전역 변수는 이에 대해 작동하지 않습니다.

 

■ sessionStorage(세션스토리지) vs localStorage(로컬스토리지) vs 쿠키

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 필요에 따라 sessionStorage 또는 localStorage을 활용하면 됩니다.

 

1. 웹 스토리지(sessionStorage/localStorage)는 문자열 기반 데이터 외에 객체를 저장 할 수 있기 때문에 개발 편의성을 향상시키는 주요 장점이다.

 

2. 웹 스토리지는 클라이언트 측에만 데이터를 저장할 수 있으며 클라이언트 측 또는 JavaScript만 해당 데이터로 재생할 수 있다. 서버 측에 데이터를 저장하려면 쿠키가 더 나은 옵션이 될 수 있다.

 

3. localStorage는 만료기간이 없기 때문에 쿠키와 다르게 한번 저장한 데이터를 영구적으로 저장할 수 있다.