HTML 5 WebStorage(HTML 5 로 컬 저장 기술)

WebStorage 는 HTML 5 에 로 컬 로 저 장 된 솔 루 션 중 하나 로 HTML 5 의 WebStorage 개념 이 도입 되 기 전에 IE User Data,Flash Cookie,Google Gears 등 이름 만 봐 도 믿 을 수 없 는 솔 루 션 을 제외 하고 브 라 우 저가 호 환 되 는 로 컬 저장 방안 은 쿠키 만 사용 합 니 다.쿠키 로 컬 저장 소 가 있 는데 왜 WebStorage 라 는 개념 을 도입 하 느 냐 고 물 을 수도 있 습 니 다.
쿠키 가 부었어 요?
쿠키 의 결함 은 매우 뚜렷 하 다.
1.데이터 크기:저장 용기 로 서 쿠키 의 크기 는 4KB 정도 로 제한 되 어 있 습 니 다.이것 은 매우 중요 한 것 입 니 다.특히 현재 복잡 한 업무 논리 적 수요 에 있어 4KB 의 용량 은 일부 설정 필드 를 저장 하 는 것 외 에 간단 한 단일 값 정 보 를 저장 하 는 것 이기 때문에 대부분의 개발 자 들 에 게 무엇 을 기대 하 는 지 모 릅 니 다.2.안전성 문제:HTTP 요청 에서 쿠키 가 명문 으로 전달 되 기 때문에(HTTPS 가 아 닙 니 다)안전성 에 문제 가 많 습 니 다.3.네트워크 부담:우 리 는 쿠키 가 모든 HTTP 요청 에 추 가 될 것 이라는 것 을 알 고 있 습 니 다.HttpRequest 와 HttpResponse 의 header 에서 전송 되 어야 하기 때문에 모 르 는 사이 에 불필요 한 데이터 손실 을 증가 시 켰 습 니 다.
WebStorage
WebStorage 는 HTML 에 추 가 된 로 컬 저장 솔 루 션 중 하나 이지 만 쿠키 를 대체 하기 위해 제 정 된 기준 이 아 닙 니 다.쿠키 는 HTTP 프로 토 콜 의 일부분 으로 클 라 이언 트 와 서버 통신 을 처리 하 는 데 사용 되 거나 부족 합 니 다.session 은 실 현 된 클 라 이언 트 상태 유지 에 의존 합 니 다.WebStorage 의 의 도 는 쿠키 를 만 들 지 말 아야 하 는데 쿠키 의 로 컬 저장 소 를 사용 해 야 한 다 는 것 을 해결 하 는 것 입 니 다.웹 스토리 지 는 두 가지 유형의 API 를 제공 합 니 다.localStorage 와 sessionStorage 는 이름 을 보면 대충 알 수 있 습 니 다.localStorage 는 로 컬 에 영구적 으로 데 이 터 를 저장 합 니 다.명시 적 으로 삭제 하거나 비우 지 않 는 한 sessionStorage 에 저 장 된 데 이 터 는 세 션 기간 에 만 유효 하고 브 라 우 저 를 닫 으 면 자동 으로 삭 제 됩 니 다.두 대상 모두 공 통 된 API 가 있다.

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

1,length:유일한 속성,읽 기 전용,storage 내의 키 쌍 수 를 가 져 옵 니 다.2.key:index 에 따라 storage 의 키 이름 3,getItem 가 져 오기:key 에 따라 storage 내의 대응 하 는 value 4,setItem 가 져 오기:storage 에 키 값 대 5,removeItem 추가:키 이름 에 따라 키 값 대 6,clear 삭제:storage 대상 비우 기
웹 스토리 지 는 웹 스토리 지 를 실현 하 는 브 라 우 저 에 어떻게 사용 합 니까?페이지 에는 두 개의 전역 대상 이 있 습 니 다.localStorage 와 sessionStoragelocalStorage 를 예 로 들 어 간단 한 조작 코드 를 보 세 요

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem('age','24');
            console.log(ls.length);//2

            //  localStorage
            for(var i=0;i<ls.length;i++){
                /*
                    age : 24 
                    name : Byron 
                */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }

            ls.removeItem('age');

            
            for(var i=0;i<ls.length;i++){
                /*
                    name : Byron 
                */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

이벤트 와 함께 HTML 5 는 storage 이 벤트 를 규정 합 니 다.WebStorage 가 변 했 을 때 터치 합 니 다.이 감시 로 서로 다른 페이지 가 storage 에 대한 수정 을 감시 할 수 있 습 니 다

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

1.key:키 값 이 맞 는 키 2,oldValue:수정 전의 value 3,new Value:수정 후의 value 4,url:변 경 된 페이지 url 5,StorageArea:변 경 된 Storage
index.php 에서 정의

<a href="test.php" target="_blank">Test</a>

window.addEventListener('storage',function(e){
                console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
                console.log(e.storageArea ==localStorage);
            },false);

            localStorage.setItem('userName','Byron');

test.php

localStorage.setItem('userName','Casper');

index.php 페이지 에서 링크 를 클릭 하여 test.php 에 접근 할 때 index.php 콘 솔 출력 log:userName is changed form Byron to Casper by 를 볼 수 있 습 니 다.http://localhost/test.phptrue
왜 쿠키 보다 좋아요?
1.용량 적 으로 볼 때 WebStorage 일반 브 라 우 저 는 5M 의 저장 공간 을 제공 하여 동 영상,이미지 등 을 저장 하 는 데 부족 하지만 대부분 조작 에 충분 합 니 다.2.안전성 에 있어 WebStorage 는 HTTP header 로 보 내 는 브 라 우 저 가 아니 기 때문에 상대 적 으로 안전 합 니 다.3.데이터 상 으로 는 WebStorage 가 서버 로 전송 되 지 않 기 때문에 불필요 한 데 이 터 를 절약 할 수 있 습 니 다.이렇게 하면 고주파 방문 이나 모 바 일 기기 에 대한 홈 페이지 에 도 좋다.이것 은 WebStorage 가 쿠키 를 대체 할 수 있다 는 것 을 의미 하 는 것 이 아니 라 WebStorage 가 있 으 면 쿠키 는 해 야 할 일 만 할 수 있 습 니 다.클 라 이언 트 와 서버 가 상호작용 하 는 채널 로 서 클 라 이언 트 상 태 를 유지 할 수 있 습 니 다.그래서 로 컬 저장 솔 루 션 인 WebStorage 만 쿠키 보다 좋 습 니 다.
주의해 야 할 점 1.브 라 우 저 호환성 은 거의 모든 HTML 5 의 새로운 기능 중에서 가장 쉽게 실 시 될 수 있 습 니 다.IE8+의 브 라 우 저 는 모두 지원 하기 때문에 IE7,IE6 에서 IE User Data 를 사용 하여 실현 할 수 있 습 니 다.

 2.localStorage 와 sessionStorage 가 모두 대상 이기 때문에 매년'.key'또는'[key]'방식 으로 키 값 을 가 져 오고 수정 할 수 있 지만 이렇게 하 는 것 을 추천 하지 않 습 니 다

localStorage.userName='Frank';
console.log(localStorage['userName']);

localstorage 는 로 컬 에 저장 되 어 있 지만 서로 다른 브 라 우 저 저장 데 이 터 는 독립 적 이기 때문에 Chrome 에 저 장 된 localstorage 는 FireFox 에서 얻 을 수 없습니다.4.localstorage 와 sessionStorage 는 문자열 형식 만 저장 할 수 있 습 니 다.복잡 한 대상 에 대해 ECMAScript 가 제공 하 는 JSON 대상 의 stringify 와 parse 를 사용 하여 처리 할 수 있 습 니 다.낮은 버 전 IE 는 json 2.js5 를 사용 할 수 있 습 니 다.콘 솔 을 제외 하고 Chrome 은 로 컬 저장 에 매우 직관 적 인 디 스 플레이 방식 을 제공 하여 디 버 깅 할 때 편리 합 니 다