쌍용강북교육센터 국비 학원 Day 55일차 JQuery (Tabs 메뉴구현, Storage)

 

쌍용 강북 교육센터 국비학원 Day 55일차

 

Tabs

자주 사용하는 tab 메뉴 구현하기

탭 메뉴를 클릭하면 버튼이 활성화 되어 해당 탭 메뉴 내용이 나타나게 한다. addClass() 메소드와 removeClass() 메소드, :eq 메소드를 사용해 구현하였다.

 

탭 구현의 예 - https://jqueryui.com/tabs/

 

※ .eq() 또는 :eq() 메소드 - 선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다. 같은 부모의 자식중에서 '숫자'번째 에게 접근한다. .index()는 숫자만 반환하는 것에 비해 .eq()는 요소를 반환하기 때문에 요소의 컨트롤에 매우 유용하다.

 

 

html 코드

 

script 태그 첫번째 방법

 

script 태그 두번째 방법

 

결과물

 

 

 

 

Storage

스토리지는 로컬 스토리지 (localStorage) 와 세션 스토리지 (sessionStorage) 가 존재한다.
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이며 간단한 키와 값을 저장할 수 있다. (key-value 스토리지의 형태이다)
    
※ 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다.

로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있게 된다. 만료 기간을 설정할 수 없다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 자동적으로 제거된다.

 

지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 일시적으로 필요한 정보 (일회성 로그인 정보 등) 는 세션 스토리지에 저장하도록 한다. 그러나 비밀번호같은 중요한 정보는 절대로 저장하면 안된다. 왜냐하면  클라이언트 컴퓨터 브라우저에 저장하는 것이기 때문에 타인에 의해 도용당할 수 있기 때문이다.

 

이와같이 데이터를 지우기 전까지는 계속 저장되어 있기 때문에  사용자의 설정이나 (보안에 민감하지 않은) 데이터들을 넣어두면 된다.  

 

로컬 스토리지랑 세션 스토리지가 나오기 이전에도 브라우저에 저장소 역할을 하는 것이 바로 쿠키인데 쿠키는 만료 기한이 있는 키-값 저장소이다. 쿠키는 4kb 용량 제한이 있고, 매번 서버 요청마다 서버로 쿠키가 같이 전송된다.

 

만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용한다. 4kb 중에는 서버에 필요하지 않은 데이터들도 있으므로 데이터 낭비가 발생할 수 있게 된다. 바로 그런 데이터들을 서버로 자동 전송되지 않도록 로컬 스토리지와 세션 스토리지에 저장하여 사용할 수 있다.

 

 

개발자 도구의 스토리지 확인방법

 

 

로컬 스토리지 (localStorage)

로컬 스토리지는 window.localStorage에 위치한다. 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 된다. 값으로는 문자열, boolean, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환된다. 키도 문자열로 변환된다. (sessionStorage도 동일하다)

 

localStorage.setItem ('key', 'value') - 로컬스토리지에 키와 값을 저장함.
localStorage.getItem ('key) - value 값을 조회함. 
localStorage.removeItem ('key') - 해당 키를 삭제한다.  
localStorage.clear() - 스토리지 전체가 비워진다.

 

 

- 객체를 저장할 시

 

ex)   localStorage.setItem ('object', { userid : 'leess', name : '이순신' });

         localStorage.getItem ('object');      // [object Object]

 

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장된다. [object 생성자] 형으로 저장되는 것이다. 
객체를 저장하려면 두 가지 방법이 있다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있다. 또한 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야된다. 객체 형식 그대로 문자열로 변환하는 것이다. 받을 때는 JSON.parse하면 된다.

 

ex)   localStorage.setItem ('object', JSON.stringify ({ userid : 'leess', name : '이순신' }));

         JSON.parse(localStorage.getItem('object'));       // { userid : 'leess', name : '이순신' }

 

※ JSON.stringify (자바스크립트객체) 는 자바스크립트 객체를 문자열(string)로 변형시켜주는 것이다.