웹 Storage API 사용 에 대한 간단 한 설명

1.브 라 우 저의 로 컬 저장 기술
최초 로 쿠키 를 사용 하여 로 컬 저장 을 하 는 것 을 제외 하고 현대 브 라 우 저 는 웹 Storage API 를 사용 하여 key/value 저장 을 편리 하 게 합 니 다.
Web Storage 는 두 가지 저장 방식 이 있 습 니 다.
1.1、sessionStorage
모든 접근 원 에 대해 서 는 독립 된 저장 영역 을 유지 합 니 다.브 라 우 저가 닫 히 지 않 는 다 면 이 데이터 들 은 사라 지지 않 을 것 이다.
그래서 이런 저장 소 를 session 저장 소 라 고 합 니 다.
이 곳 의 session 은 서버 쪽 의 session 과 뜻 이 다 릅 니 다.이 곳 의 session Storage 는 로 컬 저장 일 뿐 서버 쪽 에 데 이 터 를 전송 하지 않 습 니 다.
session Storage 의 저장 용량 은 쿠키 보다 훨씬 크 고 5MB 에 달 할 수 있 습 니 다.
1.2、localStorage
sessionStorage 와 유사 하 며 데이터 저장 에 도 사 용 됩 니 다.다른 것 은 localStorage 에 저 장 된 데 이 터 는 브 라 우 저의 종료 에 따라 사라 지지 않 습 니 다.
만 료 시간 을 설정 해서 javascript 을 사용 하여 수 동 으로 브 라 우 저 캐 시 를 삭제 하거나 명확 하 게 해서 localStorage 를 삭제 할 수 있 습 니 다.
이 두 가지 저장 방식 은 Window.session Storage 와 Window.localstorage 를 통 해 사용 된다.사실 우 리 는 Window 의 정 의 를 봅 시다.
interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage 
Window 는 Window LocalStorage 와 Window Session Storage 를 물 려 받 았 기 때문에 Window 에서 session Storage 와 localStorage 를 직접 가 져 올 수 있 습 니 다.
모든 origin 소스 에 있어 서 Window.sessionStorage 와 Window.localStorage 는 데이터 읽 기 를 위 한 새로운 Storage 대상 을 만 듭 니 다.
2.웹 스토리 지 관련 인터페이스
웹 스토리 지 와 관련 된 인 터 페 이 스 는 세 개 입 니 다.첫 번 째 는 방금 말 한 window 입 니 다.우 리 는 window 를 통 해 sessionStorage 와 localStorage 를 가 져 올 수 있 습 니 다.
두 번 째 는 Storage 대상 입 니 다.가 져 온 두 개의 Storage 대상 은 모두 Storage 대상 입 니 다.

interface Storage {

    readonly length: number;

    clear(): void;

    getItem(key: string): string | null;

    key(index: number): string | null;

    removeItem(key: string): void;

    setItem(key: string, value: string): void;
    [name: string]: any;
}

우 리 는 Storage 대상 이 우리 에 게 많은 유용 한 방법 을 제공 하여 데 이 터 를 액세스 하 는 것 을 볼 수 있다.
세 번 째 는 StorageEvent 입 니 다.storage 가 변 화 를 발견 하면 StorageEvent 이 벤트 를 촉발 합 니 다.
3.브 라 우 저 호환성
우 리 는 두 장의 그림 으로 이 두 storage 가 서로 다른 브 라 우 저 에서 의 호환성 을 살 펴 보 았 다.
Window.localStorage:

Window.sessionStorage:

현대 브 라 우 저 는 기본적으로 이 두 가지 storage 특성 을 지원 하 는 것 을 볼 수 있다.
만약 우리 가 구식 브 라 우 저,예 를 들 어 Internet Explorer 6,7 또는 열거 되 지 않 은 브 라 우 저 를 사용한다 면,우 리 는 Storage 가 브 라 우 저 에 의 해 효과적으로 지원 되 는 지 확인 하고 판단 해 야 합 니 다.
우 리 는 어떻게 검 사 를 하 는 지 보 자.

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

그 중의 type 은 localStorage 나 sessionStorage 입 니 다.저 희 는 이상 을 포착 하여 효과 적 인 Storge 대상 이 있 는 지 여 부 를 판단 합 니 다.
우리 가 어떻게 사용 하 는 지 보 자:

if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

4.은신 모드
대부분의 현대 브 라 우 저 는 은신 모드 를 지원 합 니 다.이 모드 에 서 는 탐색 기록 과 쿠키 등 데이터 프라이버시 옵션 을 저장 하지 않 습 니 다.
그래서 웹 스토리 지 와 호 환 되 지 않 습 니 다.그럼 이 문 제 는 어떻게 해결 합 니까?
서로 다른 브 라 우 저 는 서로 다른 해결 방법 을 채택 할 수 있다.
예 를 들 어 Safari 에서 은신 모드 에서 Web Storage 는 사용 할 수 있 지만 아무것도 저장 하지 않 습 니 다.
브 라 우 저가 닫 혔 을 때 이전의 모든 저장 소 를 비 우 는 것 을 선택 하 는 브 라 우 저 도 있다.
따라서 우 리 는 개발 과정 에서 서로 다른 브 라 우 저의 서로 다른 처리 방식 에 주의해 야 한다.
5.웹 스토리 지 API 사용
Storage 대상 에 대해 서 는 대상 의 속성 을 일반 대상 처럼 직접 방문 할 수도 있 고 Storage.getItem()과 Storage.setItem()을 사용 하여 속성 을 방문 하고 설정 할 수도 있 습 니 다.
Storage 대상 의 key value 는 string 형식 입 니 다.integer 를 입력 하 더 라 도 String 으로 변 환 됩 니 다.
다음 예 에서 colorSetting 속성 을 설정 할 수 있 습 니 다.

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

세 가지 방식 으로 액세스 기능 을 수행 할 수 있 지만 웹 스토리 지 API:setItem,getItem,removeItem,key,length 등 을 사용 하 는 것 을 추천 합 니 다.
Storage 의 값 을 설정 하 는 것 외 에 저 희 는 StorageEvent 를 촉발 하고 감청 할 수 있 습 니 다.
StorageEvent 의 정 의 를 살 펴 보 겠 습 니 다.

interface StorageEvent extends Event {

    readonly key: string | null;

    readonly newValue: string | null;

    readonly oldValue: string | null;

    readonly storageArea: Storage | null;

    readonly url: string;
}

Storage 대상 이 변 화 를 보 낼 때마다 StorageEvent 이 벤트 를 촉발 합 니 다.
session Storage 의 변화 라면 트리거 되 지 않 습 니 다.
domain 의 한 페이지 에 Storage 의 변화 가 발생 하면 이 domain 의 다른 페이지 는 이 변 화 를 감청 합 니 다.물론 다른 domain 이 라면 이 StorageEvent 를 감청 할 수 없습니다.
window 의 addEventListener 방법 을 통 해 storage 이 벤트 를 추가 할 수 있 습 니 다.다음 과 같 습 니 다.

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

위의 예 에서 저 희 는 StorageEvent 에서 key,oldValue,new Value,url 과 Storage 대상 을 가 져 왔 습 니 다.
이상 은 웹 스토리 지 API 의 사용 에 대한 상세 한 내용 입 니 다.웹 스토리 지 API 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!