웹 스토리지 이용 방법

이번에는 웹스토리지 사용법과 웹스토리지 사용시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

localStorage------sessionStorage

웹 저장소의 특징:

1 키-값 유형의 간단한 저장 형식

2. 개체 읽기 및 쓰기 작업은 동일한 형식으로 수행됩니다.

3. 대용량 -->5M (쿠키에 비해) -- (쿠키는 4KB에 불과하며 요청을 보낼 때 함께 가져오므로 speed)

4. 동일한 소스에서만 접근 가능

다음은 localStorage를 예로 들어 설명합니다------》sessionStorage와 localStorage는 기본적으로 동일하지만 sessionStorage는 세션이며 창이 닫히면 사라집니다. 그러나 localStorage는 로컬에 저장된 데이터이므로 프로그램이나 수동으로 삭제하지 않는 한 데이터는 손실되지 않습니다.

일반 JavaScript 객체와 유사하게 점(.) 작업과 [ ] 대괄호 작업을 사용하여 속성에 액세스할 수 있습니다.

예: localStorage.setItem("foo","1") localStorage.foo="1" localStorage["foo"]="1"

일반적으로 사용되는 API: setItem(), getItem( ) , 분명한().

객체를 저장할 때 읽고 쓸 때 객체를 JSONstring으로 변환하여 저장해야 하는데 JSON.stringify(obj)와 JSON.parse(str)

두 가지 함수가 도입되었습니다.

예: var obj={x:1,y:2} 저장소: localStorage.obj=JSON.stringify(obj), 읽기: var obj2=localStorage.parse(localStorage.obj).

데이터 열거: 1. 키 방법 및 길이 속성을 통한 탐색 2. for in traversal

1: for (var i=0;i

2：for (localStorage의 var 키){ if(localStorage.hasOwnProperty(key)){var value= localStorage[key] ; console.log(key+":"+value);} }

storage event

특정 창에서 웹 스토리지 데이터를 변경한 후, 그 외에 데이터 변경 외부의 모든 창 창은 저장 이벤트를 트리거합니다.

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

다음은 일반적으로 사용되는 여러 이벤트 이벤트 객체의 속성입니다.

key(업데이트된 키 이름), oldValue(업데이트 전 값), newValue(업데이트 후 값), url(업데이트된 페이지의 URL)

Namespace 관리-- --localStorage 데이터가 자동으로 사라지므로 정확하지 않거나 너무 많은 속성을 무분별하게 추가하면 후속 관리가 매우 어려워집니다. 네임스페이스를 통해 관리할 수 있습니다.

	var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}
1. localStorage의 데이터를 로컬 변수 저장소에 쓰면 액세스 속도가 localStroage의 액세스 속도보다 훨씬 빨라집니다. 

2. 속성 이름 충돌을 피하기 위해 다른 페이지 또는 다른 모듈의 이름은 다른 serviceNames로 지정됩니다.
3. 페이지는 localStorage를 한 번만 읽고 쓰기 때문에 페이지에서 저장소 이벤트가 트리거될 수 없습니다. 따라서 필요한 경우 localStorage 데이터를 업데이트하거나 다른 탭의 데이터를 동기화하는 메서드를 캡슐화해야 합니다. 
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 
추천 도서: 

소스 CSS3을 사용하여 링 로딩 진행률 표시줄을 구현하는 방법

JS 객체 속성 및 메서드에 액세스하는 방법
위 내용은 웹 스토리지 이용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!