HTML5 고급 튜토리얼 - 웹 저장소

머리말

HTML5에는 localStorage와 sessionStorage라는 두 가지 웹 저장소 저장 방법이 있습니다.

두 가지 방법 모두 액세스하기 쉽고 웹사이트 성능에 영향을 주지 않는 키-값 쌍을 통해 데이터를 저장합니다. 사용법은 동일하지만 보관 시간이 다릅니다.
LocalStorage 데이터는 로컬 하드웨어에 저장되며 영구적으로 저장할 수 있습니다. API를 수동으로 호출하여 데이터를 삭제할 수 있습니다. sessionStorage는 세션 개체에 저장되며 브라우저를 닫으면 지워집니다.

웹 저장소의 크기는 브라우저에 따라 제한됩니다. 주류 브라우저에서는 크기가 약 5M로 실제로 일반 데이터를 저장하기에 충분합니다.

사용법

localStorage를 예로 들어보겠습니다. sessionStorage의 사용법은 동일합니다:

setItem

데이터 저장: localStorage.setItem(key, value );

예:

localStorage.setItem('name','Hello World');

키가 동일할 경우 이전 값을 덮어써서 데이터를 수정합니다. 값이 객체인 경우 json 문자열로 변환해야 하며, 그렇지 않으면 읽는 내용은 [object Object]

getItem

데이터 읽기: localStorage.getItem(key);

예:

localStorage.getItem('name');       // Hello World

removeItem

제거단일 데이터: localStorage.removeItem(key);

예:

localStorage.removeItem('name');
localStorage.getItem('name');       // null

키 이름이 있는 데이터를 삭제하면 loaclStorage에서 데이터를 가져올 수 없으므로 null이 반환됩니다.

clear

모든 데이터 삭제: localStorage.clear ();

예:

localStorage.clear();

이때 localStorage의 모든 데이터가 삭제됩니다.

key

특정

인덱스의 키 가져오기: localStorage.key(index);예:

localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1);                // name2

인덱스 가져오기 1 키는 name2입니다.

생성자

실제 프로젝트에서는 localStorage를 여러 번 작동해야 할 수도 있습니다. 더 나은 작동을 위해 생성자를 사용할 수 있습니다.

예:

var localEvent = function (item) {
    this.get = function () {
        return localStorage.getItem(item);
    }
    this.set = function (val) {
        localStorage.setItem(item, val);
    }
    this.remove = function () {
        localStorage.removeItem(item);
    }
    this.clear = function () {
        localStorage.clear();
    }
}

// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');

local1.set('Hello World');
local2.set('Hello Linxin');

local1.get();               // Hello World
local2.get();               // Hello Linxin

이것은 단순한 데모일 뿐입니다. 일반적으로 프로젝트에 개체를 저장하는 경우 코드에서 일부 처리를 수행해야 합니다.

스토리지

이벤트 수신

localStorage 또는 sessionStorage일 때 window 객체의 스토리지 이벤트를 수신하고 해당

이벤트 처리 기능을 지정할 수 있습니다. 페이지에서 처리됩니다. 수정되면 해당 처리 기능이 실행됩니다.

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})

이벤트를 트리거하는 시간 개체(e 매개변수 값)에는 여러

속성이 있습니다.

• key: 키 값.

• oldValue: 수정 전 값.

• newValue: 수정된 값.

• url: 페이지 URL.

• storageArea: 수정된 저장소 개체입니다.

참고: Google Chrome에서는 이 이벤트를 트리거하려면 여러 탭에서 저장소를 수정해야 합니다. 즉, 웹페이지 A가 이 이벤트를 수신하고 웹페이지 B에서 localStorage가 수정됩니다. 을 클릭하면 웹페이지 A가 이벤트 기능을 실행합니다. 그러나 IE에서는 동일한 웹 페이지에서 localStorage를 수정하면 이 이벤트가 트리거됩니다.

디버깅

Google Chrome과 함께 제공되는 디버깅 도구(chrome devtools)는 사용하기 매우 쉽고 localStorage 및 sessionStorage를 디버깅하는 데 사용할 수 있습니다. 브라우저를 열고 f12를 눌러 디버깅 도구를 불러옵니다. 클릭하여 열면 왼쪽 열에 localStorage, sessionStorage, IndexedDB 등을 포함한 저장소가 표시됩니다. 원하는 웹 사이트의 도메인 이름을 선택하세요. 디버그를 실행하면 오른쪽에 해당 키와 값이 표시되며 마우스 오른쪽 버튼을 클릭하여 편집하거나 삭제할 수 있습니다.

호환

IE8 이상과 호환되지만 특별하며 서버에서 열어야 하는 경우에만 지원합니다. 파일://을 직접 두 번 클릭하여 엽니다. 파일이 호환되지 않습니다.

IE11만 file://에서 열기를 지원합니다. 다른 브라우저는 휴대폰에서의 호환성을 포함하여 높은 수준의 지원을 제공합니다.

[관련 추천]

1.

무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3.

php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5 고급 튜토리얼 - 웹 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!