11/08 38-1 [HTML] WebStorage_1(로컬 스토리지)

웹 스토리지

-클라이언트에 간단한 정보를 저장하기 위한 저장 공간. 즉 브라우저의 내부 스토리지를 사용할 수 있도록 제공해주는 기능
-서버로는 전달이 되지 않고 브라우저 로컬에만 저장되기 때문에 네트워크 레벨에서는 안전하다

-웹 스토리지의 저장 데이터는 키와 값의 쌍으로 저장.

-개인화 기능 등을 웹스토리지로 관리하면 아주 편리하게 활용할 수 있다.
-웹 스토리지는 용도에 따라 로컬 스토리지, 세션 스토리지로 나눈다.


로컬 스토리지
[특징]
-사용자가 직접 데이터를 삭제하기 전까지 데이터 저장 시간에 제한이 없어 영구적 보관이 가능, 

-만료 기간을 설정할 수 없다. 
-도메인마다 별도의 저장 영역을 생성

-로컬 스토리지 데이터는 물리적으로 저장된다.
-도메인마다 생성된 로컬 스토리지에 서로 접근 불가
-같은 도메인에 속해 있는 웹페이지들은 모두 접근 가능.
-단,웹브라우저마다 별도의 로컬 스토리지를 가짐 즉 브라우저마다 별도의 저장 장소를 가짐.

[주요 메소드 및 속성]
-long length : 저장되어 있는 데이터 수 반환
-string key(index) : 인덱스에 해당하는  키를 반환
-string getItem(key) : 키에 해당하는 값을 반환,값을 찾지 못했다면, 에러를 발생하지 않고 null을 리턴
-void setItem(key,data) : 키와 값의 쌍으로 데이터 저장
-void removeItem(key) : 키에 해당하는 값 삭제
-void clear() : 저장되어 있는 모든 데이터 삭제

 

 

적용!!

웹 스토리지를 이용한 방문자 회원 수 카운팅(로컬 스토리지)

받은 HTML 문서

 <fieldset>
        <legend>웹 스토리지를 이용한 방문자 회원수 카운팅(로컬 스토리지)</legend>
        <span id="display" style='color:red;font-size:1.2em;font-weight: bold;'></span>
        <button onclick="removeStorage();">로컬 스토리지 삭제</button>
      </fieldset>
  <script>

코드작성

<script>
        //로컬스토리지라서 브라우저 닫아도 내용이 삭제되지 않음 반 영구적임
        // 키와 값을 쌍으로 저장 !!
       
        //브라우저의 웹 스토리지 지원여부 판단
        console.log(typeof Storage !== 'undefined');  //true면 웹스토리지 지원한다는 것
        if(typeof Storage !== 'undefined'){
            var span = document.querySelector("#display");
            span.innerHTML=" 웹 스토리지를 지원하는 브라우저 입니다.";
  
            var counter = localStorage.getItem('counter')  // getItem으로 키 값(counter) 넣어줌 내맴대로 
            if(counter === null){   // 최초방문
                //방문횟수를 1로 초기화
                localStorage.setItem('counter',1);  // 요렇게setItem으로 키 값과 value를 쌍으로 넣어줌 
                span.innerHTML="첫 방문 이십니다.";              
            }
            else{      // 로컬스토리지에 키값이 있음 == 재방문일 경우
                counter++;   // 방문횟수 증가
                span.innerHTML= counter+"번째 방문 이십니다."; 
                   //다시방문 횟수 스토리지 저장
                localStorage.setItem('counter',counter);
            }
        }
        
        function removeStorage(){
            span.innerHTML="방문 횟수가 초기화 되었습니다.";
       //   localStorage.removeItem('counter');
            localStorage.clear();
        }

</script>

웹 스토리지를 이용한 방문자 회원수 카운팅(로컬 스토리지)