HTML5 웹 스토리지

if (modernizr.localstorage) { // LocalStorage 객체를 사용하여 데이터를 저장합니다 } else { 경고 ( '브라우저가 로컬 스토리지를 지원하지 않으므로 사용자 기본 설정을 저장할 수 없습니다'); setitem ( 'key', 'value')을 사용하면 데이터를 로컬 스토리지에 쓸 수 있습니다. 스토리지 한계가 5MB를 초과하면 quota_execeeded_err 예외가 발생합니다. 따라서 데이터를 저장하면서 스토리지 코드에 시도/캐치 블록을 추가하는 것이 항상 좋습니다. 브라우저와 함께 제공되는 개발자 도구를 사용하여 데이터가 로컬 스토리지에 저장되어 있는지 확인할 수 있습니다. 예를 들어 크롬에서 브라우저를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택하십시오. 리소스 탭을 선택한 다음 로컬 스토리지 항목을 클릭하십시오. 키/값 쌍의 형태로 저장된 사용자가 선택한 데이터를 볼 수 있습니다. 웹 페이지는 사용자가 설정 한 배경 및 글꼴 크기 값으로 다시로드 할 수 있습니다. getItem ( '키')은 데이터베이스에 저장된 데이터를 검색하는 데 도움이됩니다.

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

길이 함수는 저장 영역의 총 값 수를 검색합니다. 위의 기능은 다음과 같이 본체 태그의 온부하 이벤트 중에 호출 될 수 있습니다. CLEAR () 함수 또는 remodItem ( '키')을 사용하여 로컬 스토리지 영역을 지울 수 있습니다. 기능. 이 예에서는 아래 기능이 클리어 버튼의 클릭 이벤트에서 호출됩니다.

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

스토리지 이벤트 웹 스토리지에서 데이터를 설정하거나 제거하면 창 객체에서 스토리지 이벤트가 시작됩니다. 이벤트에 청취자를 추가하고 필요한 경우 스토리지 변경을 처리 할 수 ​​있습니다.

이벤트 객체에는 다음 속성이 있습니다

키 - 변경된 속성 NewValue - 새로 설정된 값

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

OldValue - 이전에 저장된 값

URL - 이벤트가 시작된 곳에서 전체 URL 경로 Storagearea - LocalStorage 또는 SessionStorage Object

이벤트는 다른 창에서만 발사되며 (이벤트가 트리거되는 창이 아닌) 데이터가 변경되지 않으면 이벤트가 발사되지 않습니다. 세션 스토리지 개체에서 메소드를 실행해야한다는 점을 제외하고는 세션 스토리지에도 동일한 API 메소드가 적용됩니다.

결론

이제 웹 스토리지를 사용하여 사용자 기본 설정, 사용자 정보, 세션 정보를 저장할 수 있습니다. 완전히 오프라인으로 사용할 수있는 앱을 만들 수 있으며 오프라인에서 저장된 데이터는 배치 업데이트로 서버로 다시 보낼 수 있습니다. 사용자가 다시 온라인 상태 일 때. html5 웹 스토리지

에 대한 자주 묻는 질문 (FAQ) html5 웹 스토리지의 SessionStorage와 LocalStorage의 차이점은 무엇입니까?

HTML5 웹 스토리지에는 두 가지 유형의 스토리지가 있습니다 : SessionStorage 및 LocalStorage. 그들 사이의 주요 차이점은 수명과 범위에 있습니다. SessionStorage는 단일 브라우저 세션 기간 동안 임시 스토리지로 설계되었습니다. 세션이 끝나 자마자, 즉 사용자가 브라우저 탭 또는 창을 닫을 때마다 지워집니다. 반면에, 브라우저가 닫히고 다시 열린 경우에도 LocalStorage가 지속됩니다. 만료 시간이없고 사용자 또는 웹 응용 프로그램에 의해 수동으로 지우기 전까지는 남아 있습니다.

html5 웹 스토리지에서 데이터에 액세스하고 조작하는 방법은 무엇입니까?

HTML5에서 데이터에 액세스하고 조작하는 방법 웹 스토리지는 간단합니다. setitem () 메소드를 사용하여 데이터를 저장하고 getitem () 메소드를 저장하여 데이터를 검색하고 제거하여 데이터를 삭제할 수 있습니다. 예를 들어, 데이터 항목을 LocalStorage에 저장하려면 LocalStorage.setitem ( 'key', 'value')을 사용할 수 있습니다. 이 데이터를 검색하려면 localStorage.getItem ( '키')을 사용하십시오. 데이터를 삭제하려면 localStorage.removeItem ( '키')을 사용하십시오.

HTML5 웹 스토리지는 Secure?

웹 스토리지가 어느 정도 안전합니다. 암호 나 신용 카드 번호와 같은 민감한 사용자 정보를 저장할 수 없습니다. 그러나 XSS (Cross-Site Scripting) 공격에 취약합니다. 따라서 민감한 정보를 저장하지 않고 저장하기 전에 항상 데이터를 검증하고 소독하는 것이 좋습니다.

HTML5 웹 스토리지의 저장 한도는 얼마입니까?

HTML5 웹 스토리지의 저장 한도는 다양합니다. 다른 브라우저 사이. 그러나 대부분의 최신 브라우저는 LocalStorage의 도메인 당 약 5MB의 스토리지를 제공합니다. SessionStorage는 또한 동일한 양의 스토리지를 제공하지만이 스토리지는 일시적이라는 것을 기억하는 것이 중요합니다.

모든 브라우저에서 HTML5 웹 스토리지를 사용할 수 있습니까?

HTML5 웹 스토리지는 모든 최신 브라우저에서 지원됩니다. Chrome, Firefox, Safari, Opera 및 Internet Explorer 8 이상을 포함합니다. 그러나 브라우저 호환성을 사용하기 전에 항상 브라우저 호환성을 확인하는 것이 좋습니다. 브라우저가 HTML5 웹 스토리지를 지원하는지 확인하려면 어떻게 할 수 있습니까?

브라우저가 JavaScript 코드에서 간단한 'if'조건을 사용하여 브라우저가 HTML5 웹 스토리지를 지원하는지 확인할 수 있습니다. if (typeof (Storage)! == "undefined") {// LocalStorage/SessionStorage의 코드. } else {// 죄송합니다! 웹 스토리지 지원이 없음 ..}

html5 웹 스토리지에 객체 또는 배열을 저장할 수 있습니까?

예, html5 웹 스토리지에 객체 또는 배열을 저장할 수 있습니다. 그러나 웹 스토리지는 문자열 값 만 지원하므로 저장하기 전에 json.stringify ()를 사용하여 객체 또는 배열을 문자열로 변환해야합니다. 이를 검색하려면 json.parse ()를 사용하여 객체 또는 배열로 다시 변환 할 수 있습니다.

HTML5 웹 스토리지에서 모든 데이터를 지우는 방법은 무엇입니까?

html5에서 모든 데이터를 지울 수 있습니다. Clear () 메소드를 사용한 웹 스토리지. 예를 들어 LocalStorage에서 모든 데이터를 지우려면 LocalStorage.clear ()를 사용할 수 있습니다. 오프라인 응용 프로그램에 html5 웹 스토리지를 사용할 수 있습니까?

예, HTML5 웹 스토리지를 사용할 수 있습니다. 오프라인 응용 프로그램. 사용자가 오프라인 상태 일 때에도 액세스하고 사용할 수있는 사용자의 브라우저에 데이터를 저장할 수 있습니다.

HTML5 웹 스토리지의 대안은 무엇입니까?

몇 가지 대안이 있습니다. 쿠키, indexeddb 및 웹 SQL을 포함한 HTML5 웹 스토리지. 그러나 이들 각각은 고유 한 장점과 단점이 있으며 선택은 웹 응용 프로그램의 특정 요구 사항에 따라 다릅니다.

위 내용은 HTML5 웹 스토리지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!