더불에 세션스토리지 의 사용방법도 알아보겟다.
크롬 기준 개발자 모드로 들어가서 Application 항목을 보면 Storage 탭이 있는데
하위에 보면 Local Storage 와 Session Storage 가 있다. (다른 webSql cookie .. 등 다른 메뉴도 있음)
Local Storage 와 Session Storage 를 열어보면 도메인에 따라 key , value 값으로 데이터를 저장 할수 있는데 저장공간은 브라우저 별로 다르다. ( 평균 5mb 로 쿠키 kb 에 비해 여유가 있음)
로컬 스토리지와 세션스토리지의 차이점은 로컬 스토리지의 경우 브라우져가 종료되도 직접 사용자가 데이터를 삭제 하지않아도 데이터가 반영구적으로 보존되는 반면에
세션스토리지는 브라우져 종료시 삭제된다.
아래와 같이 로컬 스토리지를 쓰기위한 함수를 정의한다.
//로컬스토리지에 객체저장
function fn_setLocalStorage(name,obj){
localStorage.setItem(name, obj);
}
//로컬스토리지에 특정 객체 삭제
function fn_removeLocalStorage(name){
localStorage.removeItem(name);
}
//로컬스토리지에서 특정 객체 가져오기
function fn_getItemLocalStorage(name){
return localStorage.getItem(name);
}
팝업을 띄우는 코드이다 레디함수에서 호출한다.
function displayMov() {
//현재 날짜 객체를 구한다.
var displayDate = new Date();
//로컬스토리지에 저장된 날짜 값을 구한다.
var str = fn_getItemLocalStorage("displayDate");
// 로컬 스토리지에 날짜 값이 들어간게 있다면 밀리세컨로 값이 들어가 있다.
// 없을경우 null
// 날짜 객체를 만들고 비교할 날짜를 입력한다.
var compareDate = new Date(str);
//조건이 중요한다 저장된 str 값이 없거나, 비교할 날짜보다 현자 날짜가 큰경우만
//div.MDpopFrame 을 show 한다.
if(str == undefined ||
str == null ||
compareDate.getTime() <= displayDate.getTime()){
var displayType = "blind";
var options = {};
if ( displayType === "scale" ) {
options = { percent: 50 };
} else if ( displayType === "size" ) {
options = { to: { width: 280, height: 185 } };
}
//이거는 그냥 팝업을 띄우는 소스 jqueryUI 에서 제공하는 show 함수를
//이용했다. div.MDpopFrame 를 디스플레이 한후 콜백 함수로
//displayMovCallback() 를 호출 한다.
$("div.MDpopFrame").show( displayType, options, 1000, displayMovCallback);
}else{
}
};
//팝업을 닫고 2일간 띄우지 않게끔 로컬스토리지 설정.
function displayNoneMov(){
$("div.MDpopFrame").slideUp( "fast", function() {
//팝업을 2일동안 보지 않기로 했으니 현재 시간을 구한후
//2일을 더해서 로컬스토리지에 넣는다.
var displayDate = new Date();
displayDate.setDate(displayDate.getDate() + 2);
//date 객체를 저장할때 자동으로 밀리세컨드 시간으로 저장된다.
fn_setLocalStorage("displayDate",displayDate);
});
}
위 프로세스를 실행하면 첨에 문서가 로딩되면 팝업이 보여지면서 슬라이드 되고
특정 버튼 클릭시 displayNoneMov() 를 호출하여 2일동안 팝업레이어를 노출 안하게 할 수 있다.
댓글 없음:
댓글 쓰기