HTML5 웹 스토리지
- Christopher Nolan원래의
- 2025-02-23 08:54:13341검색
HTML5 웹 스토리지는 Secure? 모든 브라우저에서 HTML5 웹 스토리지를 사용할 수 있습니까? html5 웹 스토리지에 객체 또는 배열을 저장할 수 있습니까? html5에서 모든 데이터를 지울 수 있습니다. Clear () 메소드를 사용한 웹 스토리지. 예를 들어 LocalStorage에서 모든 데이터를 지우려면 LocalStorage.clear ()를 사용할 수 있습니다. 오프라인 응용 프로그램에 html5 웹 스토리지를 사용할 수 있습니까? 몇 가지 대안이 있습니다. 쿠키, indexeddb 및 웹 SQL을 포함한 HTML5 웹 스토리지. 그러나 이들 각각은 고유 한 장점과 단점이 있으며 선택은 웹 응용 프로그램의 특정 요구 사항에 따라 다릅니다.
// 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> 스토리지 이벤트
웹 스토리지에서 데이터를 설정하거나 제거하면 창 객체에서 스토리지 이벤트가 시작됩니다. 이벤트에 청취자를 추가하고 필요한 경우 스토리지 변경을 처리 할 수 있습니다.
이벤트 객체에는 다음 속성이 있습니다
<span>window.addEventListener('storage', storageEventHandler, false);
</span> <span>function storageEventHandler(event) {
</span> <span>applySetting();
</span> <span>}</span>
이벤트는 다른 창에서만 발사되며 (이벤트가 트리거되는 창이 아닌) 데이터가 변경되지 않으면 이벤트가 발사되지 않습니다.
세션 스토리지 개체에서 메소드를 실행해야한다는 점을 제외하고는 세션 스토리지에도 동일한 API 메소드가 적용됩니다.
결론
이제 웹 스토리지를 사용하여 사용자 기본 설정, 사용자 정보, 세션 정보를 저장할 수 있습니다. 완전히 오프라인으로 사용할 수있는 앱을 만들 수 있으며 오프라인에서 저장된 데이터는 배치 업데이트로 서버로 다시 보낼 수 있습니다. 사용자가 다시 온라인 상태 일 때.
에 대한 자주 묻는 질문 (FAQ)
HTML5 웹 스토리지에는 두 가지 유형의 스토리지가 있습니다 : SessionStorage 및 LocalStorage. 그들 사이의 주요 차이점은 수명과 범위에 있습니다. SessionStorage는 단일 브라우저 세션 기간 동안 임시 스토리지로 설계되었습니다. 세션이 끝나 자마자, 즉 사용자가 브라우저 탭 또는 창을 닫을 때마다 지워집니다. 반면에, 브라우저가 닫히고 다시 열린 경우에도 LocalStorage가 지속됩니다. 만료 시간이없고 사용자 또는 웹 응용 프로그램에 의해 수동으로 지우기 전까지는 남아 있습니다. html5 웹 스토리지에서 데이터에 액세스하고 조작하는 방법은 무엇입니까?
HTML5에서 데이터에 액세스하고 조작하는 방법 웹 스토리지는 간단합니다. setitem () 메소드를 사용하여 데이터를 저장하고 getitem () 메소드를 저장하여 데이터를 검색하고 제거하여 데이터를 삭제할 수 있습니다. 예를 들어, 데이터 항목을 LocalStorage에 저장하려면 LocalStorage.setitem ( 'key', 'value')을 사용할 수 있습니다. 이 데이터를 검색하려면 localStorage.getItem ( '키')을 사용하십시오. 데이터를 삭제하려면 localStorage.removeItem ( '키')을 사용하십시오. HTML5 웹 스토리지의 저장 한도는 얼마입니까?
HTML5 웹 스토리지의 저장 한도는 다양합니다. 다른 브라우저 사이. 그러나 대부분의 최신 브라우저는 LocalStorage의 도메인 당 약 5MB의 스토리지를 제공합니다. SessionStorage는 또한 동일한 양의 스토리지를 제공하지만이 스토리지는 일시적이라는 것을 기억하는 것이 중요합니다. HTML5 웹 스토리지는 모든 최신 브라우저에서 지원됩니다. Chrome, Firefox, Safari, Opera 및 Internet Explorer 8 이상을 포함합니다. 그러나 브라우저 호환성을 사용하기 전에 항상 브라우저 호환성을 확인하는 것이 좋습니다.
브라우저가 JavaScript 코드에서 간단한 'if'조건을 사용하여 브라우저가 HTML5 웹 스토리지를 지원하는지 확인할 수 있습니다. if (typeof (Storage)! == "undefined") {// LocalStorage/SessionStorage의 코드. } else {// 죄송합니다! 웹 스토리지 지원이 없음 ..}
HTML5 웹 스토리지에서 모든 데이터를 지우는 방법은 무엇입니까?
HTML5 웹 스토리지의 대안은 무엇입니까?
위 내용은 HTML5 웹 스토리지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!