HTML5에는 localStorage와 sessionStorage라는 두 가지 웹 저장소 저장 방법이 있습니다.
두 가지 방법 모두 액세스하기 쉽고 웹사이트 성능에 영향을 주지 않는 키-값 쌍을 통해 데이터를 저장합니다. 사용법은 동일하지만 보관 시간이 다릅니다.
LocalStorage 데이터는 로컬 하드웨어에 저장되며 영구적으로 저장할 수 있습니다. API를 수동으로 호출하여 데이터를 삭제할 수 있습니다. sessionStorage는 세션 개체에 저장되며 브라우저를 닫으면 지워집니다.
웹 저장소의 크기는 브라우저에 따라 제한됩니다. 주류 브라우저에서는 크기가 약 5M로 실제로 일반 데이터를 저장하기에 충분합니다.
localStorage를 예로 들어보겠습니다. sessionStorage의 사용법은 동일합니다:
데이터 저장: localStorage.setItem(key, value );
예:
localStorage.setItem('name','Hello World');
키가 동일할 경우 이전 값을 덮어써서 데이터를 수정합니다. 값이 객체인 경우 json 문자열로 변환해야 하며, 그렇지 않으면 읽는 내용은 [object Object]
데이터 읽기: localStorage.getItem(key);<입니다. 🎜>
예:localStorage.getItem('name'); // Hello World
제거단일 데이터: localStorage.removeItem(key);
예:localStorage.removeItem('name'); localStorage.getItem('name'); // null
localStorage.clear();
인덱스의 키 가져오기: localStorage.key(index);예:
localStorage.setItem('name1','Hello World'); localStorage.setItem('name2','Hello Linxin'); localStorage.key(1); // name2
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이벤트 처리 기능을 지정할 수 있습니다. 페이지에서 처리됩니다. 수정되면 해당 처리 기능이 실행됩니다.
window.addEventListener('storage',function(e){
console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})속성이 있습니다.
위 내용은 HTML5 고급 튜토리얼 - 웹 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
