소개

웹 스토리지는 웹 브라우저에 데이터를 영구적으로 저장하기 위한 메커니즘입니다.HTML5 기능 중 하나입니다. W3C ® 규격 웹 스토리지에 따라 API는 키 값 쌍에서 날짜를 저장할 수 있습니다. 두 가지 종류의 웹 스토리지가 있습니다. 그 중 하나는 로컬 스토리지이며 다른 하나는 세션 스토리지입니다. 각 저장 매커니즘에 대한 자세한 정보는 들어오는 영역에 포함되었습니다.   웹 저장 공간 데이터는 각 애플리케이션 및 다른 애플리케이션에서 액세스할 수 없습니다. 세션 스토리지와 로컬 스토리지의 사용을 보여주는 간단한 Tic-Tac-Toe 애플리케이션이 이 문서에서 사용되었습니다.

Sessionstorage를 사용하여 하나의 세션에 대한 데이터를 설정, 가져오기 및 삭제 방법

SessionStorage 개체는 한 세션에 대해서만 데이터를 저장합니다. 즉 애플리케이션을 닫을 때 세션은 만료되고 세션 저장소 개체 값은 손실됩니다.   우리는 아래 주어진 setItem(mykey, myvalue) 메서드를 사용하여 키 값 쌍을 설정할 수 있습니다. 첫 번째 인수가 고유 키이고 두 번째 인수는 데이터입니다.  

//데이터 설정 구문
 sessionStorage.setItem(yourkey, yourvalue);

데이터 설정되면 getItem(mykey) 메서드를 사용하여 데이터를 얻을 수 있습니다. 여기서 'yourkey'는 데이터를 가져오는 데 사용되는 고유 키입니다.

데이터 가져오기 구문
var getdata = sessionStorage.getItem(yourkey);

이름을 설정하려면 아래에 주어진 코드를 사용할 수 있습니다. 여기서 'yourname'은 첫 번째 인수로서의 고유 키이며 Ram은 두 번째 인수로서의 데이터입니다.

//아래 코드 라인을 사용하여 이름 설정
sessionStorage.setItem('yourname', 'Ram');

이름을 가져오려면 아래 주어진 코드를 사용할 수 있습니다.

아래 코드 라인을 사용하여 이름을 가져옴
var yourname = sessionStorage.getItem(' yourname ');

이제 세션 저장소에서 특정 데이터를 삭제하려면 removeItem(yourkey) 메서드를 사용할 수 있습니다.

//Sessionstorage로부터 데이터 삭제
var removename = sessionStorage.removeItem(yourkey);

현재 세션에서 모든 데이터를 삭제해야할 때도 있습니다. 이 경우 clear() 메서드를 사용할 수 있습니다. ;

//현재 세션에서 모든 데이터를 삭제하려면 아래 코드 라인 사용
sessionStorage.clear();

또한 다음과 같이 한 세션에 대해 사용자의 이름을 저장할 수 있습니다.

sessionStorage.yourname = "Sahu";

localstorage를 사용하여 데이터를 설정하고 가져오고 삭제하는 방법

localStorage 개체는 데이터를 저장할 저장 변수를 제공합니다. 로컬 저장소에 데이터를 저장하는 경우 이 데이터는 로컬 저장소에 영구적으로 저장됩니다. 애플리케이션을 닫는 경우에라도 해당 데이터는 로컬 저장소에서 사용가능 합니다. sessionStorage 장에서 설명된 바와 같이 localStorage의 모든 메서드를 사용할 수 있습니다. 유일한 차이점은 애플리케이션을 닫은 다음에도 모든 데이터를 사용할 수 있다는 것입니다. 로컬 저장소와 Clear() 메서드를 함께 사용하면 모든 로컬 저장소의 데이터는 삭제됩니다. 아래 코드 라인을 사용하면 setitem 메서드를 사용하여 로컬 저장소에서 키 값 쌍을 설정할 수 있습니다. 여기서 'yourkey'는 데이터를 가져오는 데 사용되는 고유 키입니다.        

//데이터 설정 구문
localStorage.setItem(yourkey, yourvalue);

데이터를 검색하려면 getitem(yourkey) 메서드를 사용하고 다음과 같이 getdata 변수에 저장할 수 있습니다.

//데이터 가져오기 방법
var getdata = localStorage.getItem(yourkey);

여기에 setItem 메서드를 사용하여 이름을 저장하는 방법의 예제가 나와 있습니다.        

//아래 코드 라인을 사용 하여 이름 설정
localStorage.setItem(' yourname', 'Ram');

이름을 가져오려면 아래 코드 라인을 사용할 수 있습니다.

아래 코드 라인을 사용하여 이름을 가져옴
var yourname = localStorage.getItem(' yourname ');

localstorage에서 데이터를 제거하려면 removeItem(yourkey) 함수를 사용합니다.

//localstorage로부터 데이터 삭제
var removename = localStorage.removeItem(yourkey);

아래 코드는 localstorage에서 모든 데이터를 삭제하는 데 사용됩니다.

//localStorage로부터 모든 데이터를 삭제하려면 아래 코드 라인 사용
localStorage.clear();

지금 Tic-Tac-Toe 예제를 통해 애플리케이션에서의 세션 저장소 사용 방법을 살펴봅니다.

Tic Tac Toe 게임에서 세션 저장소 사용하기

여기에서 게임 플레이어의 이름과 점수는 sessionStorage 개체에 저장됩니다.

그림1:Sessionstorage

코드 예제

이름이 비어 있는지 여부를 함수 saveplayername()를 사용하여 확인할 수 있습니다. 사용자 이름이 비어 있으면 경고 메시지가 표시됩니다. 이름을 입력하고 버튼을 클릭하여(이름을 저장하고 게임 시작) 게임을 재생합니다. 이 버튼을 클릭하여 TIC TAC TOE 게임을 로드합니다. 이 게임에서 "X" 기호와 함께 사용자가 첫 번째 차례가 돠며, "O" 기호와 함께 장치가 그 다음 차례가 됩니다.

sessionStorage 개체에 플레이어 이름을 저장합니다.

function savePlayerName()
{
	var username1 = $('#Player1').val().trim();
	var username2 = $('#Player2').val();
	//이름이 비어 있고 경고 메시지가 나타나면 이름을 확인합니다.
	if (!username1)
	{
		alert("Please enter your name");
		return;
	}
	//이름 값 저장
	sessionStorage.setItem("Player1name", username1);
	sessionStorage.setItem("Player2name", username2);
	//게임 점수 초기화
	sessionStorage.Player1Score = 0;
	sessionStorage.Player2Score = 0;
	window.location.href="#play-game-page";
}

'sessionStorage' 변수를 사용하여 세션 저장소에 접근할 수 있습니다. 아래 코드는 이 세션에서 게임의 승자가 누구인지를 확인합니다. 세션이 만료되면 플레이어의 점수가 손실됩니다. 양 플레이어의 점수는 sessionStorage 개체에 저장됩니다.       

//TicTacToeWinnner(symbol)는 게임의 승자가 누구인지를 확인하는데 사용됩니다.
//이 함수에서 플레이어의 점수를 증분합니다.
function TicTacToeWinnner(symbol)
{
	var matchwin = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ],
	                 [ 0, 3, 6 ], [ 1, 4, 7 ], [ 2, 5, 8 ],
	                 [ 0, 4, 8 ], [ 2, 4, 6 ] ];
	for ( var a = 0; a < matchwin.length; a++)
	{
		if (CanvasContent[matchwin[a][0]] === symbol &&
			CanvasContent[matchwin[a][1]] === symbol &&
			CanvasContent[matchwin[a][2]] === symbol)
		{
			var name;
			var newScore = 0;
			if (symbol === 'X')
			{
			name = sessionStorage.getItem("Player1name");
			이름에 대한 점수 증분
			sessionStorage.Player1Score = Number(sessionStorage.Player1Score) + 1;
			newScore = sessionStorage.Player1Score;
			}
			else
			{
			name = sessionStorage.getItem("Player2name");
			//모바일 점수 증분
			sessionStorage.Player2Score = Number(sessionStorage.Player2Score) + 1;
			newScore = sessionStorage.Player2Score;
			}
			//플레이어 우승자 이름 표시
			$("#Winner-player").html("Current winner Name :"+ name);

			restartGame();
			for ( var l = 0; l <= 8; l++)
			{
			positiondata[l] = true;
			}
 			//최고 점수인지 여부를 확인합니다.
                        if(localStorage.highScore)
         		{
                        //플레이어 점수가 최고 점수 보다 크면
                        //해당 점수를 최고 점수로 업데이트합니다.
 	                    if(newScore > localStorage.highScore)
			    {
				setHighScore(name, newScore);
			    }
			}
			else
			{
				setHighScore(name, newScore);
			}
			return true;
		}
	}
	return false;
}

Tic Tac Toe 게임에서 로컬 저장소 사용

localstorage는 높은 게임 점수를 저장하는데 사용되므로 사용자가 게임을 종료할 때에도 높은 게임 점수를 사용할 수 있습니다.

로컬 저장소 데이터에 대한 에뮬레이터의 스크린샷이 아래에 제공됩니다.

그림 2: Weblocalstorage

코드 예제

플레이어가 현재 최고 점수보다 더 많은 점수를 득점할 수 있다면, 플레이어의 이름과 점수는 최고 득점으로 업데이트됩니다. 플레이어는 새로운 높은 점수를 저장할 것인지 묻는 경고 메시지를 가져옵니다. 플레이어가 자신의 이름을 저장하기를 원치 않는 경우 취소 버튼을 클릭할 수 있습니다.

여기 localStorage 개체를 사용하여 업데이트하고 고득점자 이름 및 기록을 영구적으로 유지합니다.         

//플레이어 점수를 확인하고 최고 점수보다 높다면 최고 점수로 이름을 업데이트합니다.
function setHighScore(name, newScore)
{
	var res = confirm("This is a new high score. Do you want to save this score ?");
	if (res === true)
	{
		//우승자 점수와 로컬 저장소 이름 저장
		localStorage.highScore = newScore;
		localStorage.highScorerName = name;
	}
}

아래 코드는 상위 득점자 이름 및 해당 점수를 가져오는 데 사용됩니다. 최고 점수를 표시하려면 상단 점수 버튼을 클릭합니다. localStorage 개체 점수는 데이터를 영구적으로 저장하는데 사용됩니다.          

//함수 showtopscore()는 최고 득점자 이름과 점수를 나타냅니다.
function showTopScore()
{
	//최고 점수가 있으면 해당 이름과 점수가 표시됩니다.
	if(localStorage.highScore)
	{
		var msg = "Top scorer name : " + localStorage.highScorerName +
                          " Score : " + localStorage.highScore;
		alert(msg);
	}
	else
	{
		//최고 점수가 없으면 표시됩니다
                // "No top score"
		alert("No top score");
	}
}

고득점 데이터 삭제 방법

이 게임의 높은 점수는 localstorage에 저장됩니다. 플레이어가 고득점 데이터를 삭제하려면 clear score 버튼을 클릭합니다. 그러면 localstorage의 데이터가 삭제됩니다. clear score 버튼을 클릭하면 다음 함수가 호출됩니다.        

//게임의 높은 점수를 삭제하려면 다음 함수를 사용합니다.
function clearScore()
{
	var res = confirm("Do you want to clear the score ?");
	if (res == true)
	{
		localStorage.clear();
	}
}

결론

이 문서에서 Tizen 웹 애플리케이션에서 로컬 및 세션 웹 저장 방법에 대해 알아보았습니다. 애플리케이션에서 웹 스토리지를 사용하는 경우 참조로 샘플 애플리케이션을 사용할 수 있습니다.

빌드 요구 사항

애플리케이션은 Tizen 2.0 펌웨어가 설치된 장비용으로 제공됩니다.

SDK 사용환경: 2.0.0a4

부록

샘플 애플리케이션 첨부