종종 첫 번째 JavaScript 애플리케이션은 Todo 목록이지만 이러한 애플리케이션의 문제는 페이지를 새로 고친 후 목록의 모든 항목이 사라진다는 것입니다.
이 문제에 대한 간단한 해결책은 다음을 사용하는 것입니다. 로컬 스토리지(로컬 스토리지). 로컬 저장소를 사용하면 사용자의 컴퓨터에 데이터를 저장할 수 있으며 페이지를 새로 고친 후 목록을 쉽게 로드할 수 있습니다. 이 기사에서는 로컬 저장소를 사용하여 작은 할일 목록을 작성합니다.
로컬 스토리지란 무엇입니까?
로컬 저장소("웹 저장소")는 원래 HTML5 사양의 일부였지만 지금은 별도의 저장소로 이동되었습니다. 다음 두 가지 방법으로 데이터를 저장할 수 있습니다.
- 로컬 스토리지: 우리가 사용할 영구 저장소입니다.
- 세션 스토리지: 이 세션에 대한 데이터만 저장합니다. 사용자가 페이지를 닫으면 데이터가 손실됩니다.
로컬 저장소를 사용하면 키-값 쌍의 형태로 사용자의 컴퓨터에 데이터를 저장할 수 있으며 이 데이터는 브라우저를 닫거나 컴퓨터가 꺼진 후에도 사용할 수 있습니다.
HTML
할 일 목록을 만들려면 다음이 필요합니다.
- 요소의 내용을 입력하기 위한 텍스트 입력입니다.
- 목록에 항목을 추가하기 위한 버튼입니다.
- 목록을 지우는 버튼입니다.
- 목록 자체
- ).
- 그리고 오류를 표시하는 추가 div.
따라서 HTML 마크업은 다음과 같이 보일 것입니다.
충분한 단순한 구조, JavaScript로 생생하게 만들 것입니다.
왜냐하면 jQuery를 사용하므로 추가로 포함해야 합니다.
자바스크립트
먼저 추가 버튼 클릭을 추적하고 입력 필드가 비어 있지 않은지 확인해야 합니다.
$("#추가").click(function() ( var 설명 = $("#설명").val(); if($("#설명").val() == "") ( $( "#경고").html(" 경고!할 일을 비워두었습니다"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
이 코드는 텍스트 입력의 값을 확인하고 비어 있으면 오류를 표시하고 false를 반환하여 나머지 코드가 실행되지 않고 요소가 목록에 추가되지 않도록 합니다.
// 항목 삽입 $("#todos").prepend("
로컬 저장소로 작업하려면 키와 해당 값을 제공해야 합니다. 우리의 경우 키를 'todos'라고 부르고 값은 목록(태그
- ). 이 코드는 다음에서 쉽게 얻을 수 있습니다. 제이쿼리. 그리고 마지막으로 양식을 제출하고 페이지를 다시 로드하지 않도록 false를 반환합니다.
- " + 설명 + " "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( ), location.reload(), false를 반환, )), )),
- 로컬 저장소: 만료 날짜 없이 데이터를 저장하며 목록이 페이지에 가능한 한 오랫동안 유지되기를 원하기 때문에 이 옵션을 사용할 것입니다.
- 세션 저장: 한 세션에 대한 데이터만 저장하므로 사용자가 탭을 닫았다가 다시 열면 모든 데이터가 손실됩니다.
- 우리 목록을 배치 할 수있는 입구
- 목록을 추가하려면 Enter 버튼을 누르세요.
- 전체 일기를 지우는 버튼
- 목록이 요소 목록에 포함될 순서 없는 목록 컨테이너
- 마지막으로 빈 작업을 입력하려고 할 때 알림을 표시할 DIV 컨테이너가 필요합니다.
다음 단계는 로컬 저장소를 확인하는 것입니다. 키가 'todos'인 값이 있으면 로컬 저장소에서 목록을 로드합니다.
If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )
왜냐하면 우리는 저장 준비된 HTML저장소에서 이 코드를 목록에 붙여넣기만 하면 됩니다.
할 일 목록이 거의 준비되었으며 목록을 지우는 기능만 구현하면 됩니다. 사용자가 버튼을 클릭하면 전체 목록이 삭제되고 로컬 저장소가 지워집니다.
$("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));
준비가 된! 전체 코드는 다음과 같습니다.
$(document).ready(function() ( $("#add").click(function() ( var 설명 = $("#description").val(); if ($("#description"). val() == "") ( $("#경보").html(" 경고!할 일을 비워 두었습니다"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("
브라우저 지원
웹 스토리지는 IE8을 포함한 모든 주요 브라우저에서 지원됩니다. IE7 이하만 두려워해야 합니다.
결론
이러한 소규모 애플리케이션의 로컬 스토리지는 훌륭한 교체데이터 베이스. 소량의 정보를 저장하는 것은 어렵지 않습니다.
할 일 목록 앱을 만드는 것은 일반적으로 JavaScript를 배울 때 가장 먼저 만드는 앱이지만 모든 앱의 문제는 페이지를 새로고침하면 해당 목록이 모두 사라진다는 것입니다.
로컬 저장소를 사용하는 간단한 솔루션이 있습니다. 로컬 저장소의 장점은 사용자의 컴퓨터에 데이터 비트를 저장할 수 있고 페이지가 다시 로드될 때 모든 작업 목록이 제자리에 남아 있다는 것입니다.
로컬 스토리지란 무엇입니까?
로컬 스토리지는 HTML5 사양의 일부인 스토리지 네트워크의 일부입니다. BOM에 데이터를 저장하는 두 가지 옵션이 있습니다.
간단히 말해서 모든 웹 저장소는 이름이 있는 키/값 쌍을 로컬에 저장하고 쿠키와 달리 이 데이터는 브라우저를 닫거나 컴퓨터를 끄더라도 유지됩니다.
할 일 목록에 대해 생각하고 있다면 다음이 필요합니다.
따라서 HTML은 다음과 같아야 합니다.
이것은 꽤 표준적인 HTML 컨테이너이며 JavaScript를 사용하여 모든 것을 동적 콘텐츠로 채울 수 있습니다.
이 예제에서는 jQuery를 사용할 것이므로 HTML 문서에도 포함해야 합니다.
자바스크립트
간단한 "할 일 목록" 응용 프로그램의 구조에 대해 생각할 때 가장 먼저 해야 할 일은 사용자가 "추가" 또는 "확인" 버튼을 클릭할 때 입력에 빈 값이 있는지 확인하는 것입니다.
$("#add").click(function() ( var Description = $("#description").val(); //할 일이 비어 있는 경우 if($("#description").val( ) == "") ( $("#경보").html(" 경고!할 일을 비워두었습니다"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
우리가 한 일은 추가 버튼 클릭을 테스트하고 간단한 테스트를 실행하여 사용자가 입력 내용을 채웠는지 확인하는 것뿐이었습니다. 그렇지 않은 경우 경고 div가 나타나고 1000ms 동안 유지되었다가 사라집니다.
다음으로 해야 할 일은 값이 있는 목록 항목을 입력 줄에 삽입하는 것입니다. 사용자가 작업을 추가할 때 항상 목록의 맨 위로 이동한 다음 다음과 같이 로컬 저장소의 항목을 나열합니다.
// 목록 항목 추가 $("#todos").prepend("
보시다시피 이것은 꽤 표준적인 jQuery이며 로컬 스토리지에 관해서는 키와 값을 저장해야 합니다. 키는 우리가 스스로에게 부여한 이름입니다. 이 경우에는 "Todos"라고 부를 것입니다. 그런 다음 저장할 항목을 정의해야 합니다. 이 경우에는 정렬되지 않은 목록의 Todos 내부에 있는 모든 HTML입니다. 보시다시피 jQuery로 모든 것을 캡처하고 마침내 "false"(false)를 반환하여 양식이 포기하지 않고 페이지가 새로 고쳐지지 않도록 했습니다.
다음 단계는 로컬에 저장된 것이 있는지 확인하는 것입니다. 있는 경우 키에 "todos"라는 이름을 지정했기 때문에 해당 키를 페이지에 배치해야 합니다. 존재 여부를 확인해야 합니다. 이와 같이:
// 로컬 저장소에 무언가가 있는 경우 if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )
응용 프로그램을 테스트하고 페이지를 다시 로드하면 이미 작동하고 있음을 알 수 있습니다. 우리가 해야 할 일은 전체 목록을 지울 책임이 있는 함수를 만드는 것입니다. 모든 로컬 저장소를 지우고 변경 사항이 적용되도록 페이지를 다시 로드한 다음 다음과 같이 URL 앞의 해시를 방지하기 위해 "false"를 반환합니다.
// 모든 로컬 저장소 지우기 $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));
전체 코드는 다음과 같습니다.
$("#추가").click(function() ( var 설명 = $("#설명").val(); if($("#설명").val() == "") ( $( "#경고").html(" 경고!할 일을 비워 두었습니다"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("
브라우저 지원
Web Storage 지원은 HTML5 사양에 매우 적합하며 모든 주요 브라우저와 IE8에서도 지원됩니다.
번역: 블라드 메르제비치
영구 로컬 저장소는 클라이언트 응용 프로그램이 서버 응용 프로그램에 비해 이점이 있는 영역 중 하나입니다. 다음과 같은 응용 프로그램의 경우 운영 체제, 설정 또는 실행 상태와 같은 데이터를 저장하고 검색하기 위한 추상화 계층을 제공합니다. 이러한 값은 플랫폼 원칙에 따라 레지스트리, INI 파일, XML 파일 또는 다른 곳에 저장될 수 있습니다. 클라이언트 응용 프로그램에 키/값 쌍 이상의 로컬 저장소가 필요한 경우 고유한 데이터베이스를 삽입하거나 고유한 파일 형식 또는 기타 여러 솔루션을 만들 수 있습니다.
역사적으로 웹 애플리케이션에는 이러한 사치가 없었습니다. 쿠키는 인터넷 역사 초기에 발명되었으며 소량의 데이터를 로컬에 영구적으로 저장하는 데 사용할 수 있습니다. 그러나 세 가지 잠재적인 단점이 있습니다.
- 쿠키는 모든 HTTP 요청에 포함되어 있으므로 동일한 데이터를 계속해서 불필요하게 전송하여 웹 애플리케이션 속도를 저하시킵니다.
- 데이터가 암호화되지 않은 형태로 인터넷을 통해 전송될 때 모든 HTTP 요청에 쿠키가 포함됩니다(전체 웹 애플리케이션이 SSL을 통해 전송되더라도).
- 쿠키는 약 4KB의 데이터로 제한되어 있어 애플리케이션 속도를 늦추기에 충분하지만(위 참조) 유용하기에는 충분하지 않습니다.
우리가 정말로 원하는 것은 다음과 같습니다.
- 충분한 저장 공간;
- 클라이언트 측에서 작업하십시오.
- 페이지 새로 고침을 고려하십시오.
- 서버로 전송하지 않습니다.
HTML5 이전에는 이를 달성하려는 모든 시도가 다양한 방식으로 실패했습니다.
HTML5 이전의 로컬 스토리지의 간략한 역사
처음에는 하나밖에 없었다. 인터넷 익스플로러. 적어도 마이크로소프트는 세상이 그렇게 생각하기를 바랐다. 이를 위해 Microsoft는 1차 대 브라우저 전쟁의 일환으로 많은 것을 발명하여 전쟁을 종식시킨 브라우저인 Internet Explorer에 포함시켰습니다. 이러한 것 중 하나를 DHTML 동작이라고 하고 동작 중 하나를 userData 라고 합니다.
UserData를 사용하면 웹 페이지에서 도메인당 최대 64KB의 데이터를 계층적 XML과 같은 구조로 저장할 수 있습니다. 인트라넷 사이트와 같은 신뢰할 수 있는 도메인은 10배 더 많이 저장할 수 있습니다. 그리고 모두에게 640kb면 충분합니다. IE는 이러한 규칙을 변경할 방법을 제공하지 않았으므로 사용 가능한 메모리를 늘릴 방법이 없습니다.
2002년 Adobe는 Flash 6에 "Flash 쿠키"라는 잘못된 이름을 붙인 기능을 도입했지만 실패했습니다. Flash에서 이 기능은 로컬 공유 객체(로컬 액세스 가능한 객체, LSO)로 더 정확하게 알려져 있습니다. 간단히 말해서 Flash 개체는 도메인당 최대 100KB의 데이터를 저장할 수 있습니다. Brad Neuberg는 AMASS(AJAX Massive Storage System)라고 하는 Flash와 JavaScript 간의 브리지 초기 프로토타입을 개발했지만 일부 Flash 설계 문제로 인해 제한을 받았습니다. 2006년까지 Flash 8에 ExternalInterface가 등장하면서 JavaScript를 통해 LSO에 액세스하는 것이 훨씬 더 쉽고 빨라졌습니다. Brad는 AMASS를 다시 작성하여 dojox.storage라는 별칭으로 널리 사용되는 Dojo Toolkit에 통합했습니다. Flash "무료"는 각 도메인에 100kb의 스토리지를 제공합니다. 또한 사용자가 요청할 경우 스토리지 크기를 10분의 1(1MB, 10MB 등)로 늘리라는 메시지를 표시합니다.
if (Modernizr.localstorage) (
// window.localStorage를 사용할 수 있습니다!
) 또 다른 (
// HTML5 스토리지에 대한 기본 제공 지원 없음
}
HTML5 스토리지 사용
HTML5 저장소는 키/값 쌍의 이름을 기반으로 합니다. 키 이름을 기반으로 정보를 저장한 다음 동일한 키로 해당 데이터를 검색할 수 있습니다. 키 이름은 문자열입니다. 데이터는 문자열, 부울, 정수 또는 부동 소수점 숫자를 포함하여 JavaScript가 지원하는 모든 유형이 될 수 있습니다. 그러나 데이터는 실제로 문자열로 저장됩니다. 비문자열을 저장하고 검색하는 경우 parseInt() 또는 parseFloat()와 같은 함수를 사용하여 수신된 데이터를 올바른 JavaScript 유형으로 변환해야 합니다.
스토리지 인터페이스(
getItem(key)를 통해 가져오기;
setItem(key, data)을 통해 설정;
};
기존 키 이름으로 setItem()을 호출하면 이전 값을 자동으로 덮어씁니다. 존재하지 않는 키로 getItem()을 호출하면 예외가 발생하지 않고 NULL이 반환됩니다.
다른 사람들처럼 자바스크립트 객체 localStorage 객체에 연관 배열로 액세스할 수 있습니다. getItem() 및 setItem() 메서드를 사용하는 대신 대괄호만 사용할 수 있습니다. 예를 들어 이 코드 조각
var foo = localStorage.getItem("바");
// ...
localStorage.setItem("막대", foo);
대괄호 구문을 사용하여 다시 작성할 수 있습니다.
var foo = localStorage["바"];
// ...
localStorage["bar"] = foo;
키 이름으로 값을 삭제하고 전체 저장소를 지우는 방법도 있습니다(즉, 모든 키와 값을 한 번에 삭제).
스토리지 인터페이스(
removeItem(key)를 통해 제거합니다.
분명한();
}
존재하지 않는 키를 사용하여 removeItem()을 호출하면 아무 것도 반환되지 않습니다.
마지막으로 저장 영역에 있는 값의 총 개수를 구하고 모든 키를 인덱스별로 반복(각 키의 이름을 가져옴)하는 속성이 있습니다.
스토리지 인터페이스(
길이
키 가져오기(음수가 아닌 정수);
}
key()가 호출될 때 인덱스가 0에서 (길이-1) 범위에 없으면 함수는 null 을 반환합니다.
HTML5 저장 영역 추적
프로그래밍 방식으로 스토리지 변경 사항을 추적하려면 스토리지 이벤트를 포착해야 합니다. 이 이벤트는 setItem() , removeItem() 또는 clear() 가 호출되고 무언가를 변경할 때 창 객체에서 발생합니다. 예를 들어 기존 값을 설정하거나 키가 없을 때 clear()를 호출하면 저장 영역이 실제로 변경되지 않았기 때문에 이벤트가 발생하지 않습니다.
저장소 이벤트는 Internet Explorer 8을 포함하여 localStorage 개체가 실행되는 모든 곳에서 지원됩니다. IE 8은 W3C addEventListener 표준을 지원하지 않으므로(최종적으로 IE 9에 추가될 예정임), 저장소 이벤트를 포착하려면 어느 것이 이벤트 엔진은 브라우저를 지원합니다(이전에 다른 이벤트로 이 작업을 수행했다면 이 섹션을 끝까지 건너뛸 수 있습니다). 저장 이벤트를 트래핑하는 것은 다른 이벤트를 트래핑하는 것과 같은 방식으로 작동합니다. jQuery 또는 다른 것을 사용하려는 경우 자바스크립트 라이브러리이벤트 핸들러를 등록하려면 스토리지에서도 이를 수행할 수 있습니다.
if (window.addEventListener) (
window.addEventListener("저장소", handle_storage, 거짓);
) 또 다른 (
window.attachEvent("온스토리지", 핸들_스토리지);
};
handle_storage 콜백은 이벤트가 window.event에 저장되는 Internet Explorer를 제외하고 StorageEvent 객체와 함께 호출됩니다.
함수 handle_storage(e) (
if (!e) ( e = window.event; )
}
이 경우 변수 e는 다음과 같은 유용한 속성을 가진 StorageEvent 객체가 됩니다.
*참고: url 속성은 원래 uri라고 했으며 사양이 변경되기 전에 일부 브라우저에서는 이 속성을 지원했습니다. 호환성을 최대화하려면 url 속성이 있는지 확인하고, 없으면 uri 속성을 확인하세요.
저장 이벤트는 취소할 수 없으며 handle_storage 콜백 내부에서 변경을 중지할 방법이 없습니다. 브라우저가 "이봐, 방금 일어난 일이야. 당신이 할 수 있는 일은 아무것도 없어요, 그저 당신이 알아주길 바랐을 뿐입니다."
현재 브라우저의 제한 사항
타사 플러그인을 사용한 로컬 스토리지의 역사에 대해 이야기하면서 각 기술의 한계를 언급했습니다. 현재 표준 HTML5 스토리지의 한계에 대해 아무 말도 하지 않았다는 것을 기억했습니다. 답변을 드린 후 설명드리겠습니다. 답변은 중요도 순으로 "5MB", "QUOTA_EXCEEDED_ERR" 및 "none"입니다.
"5 메가바이트" - 기본적으로 제공되는 저장 공간의 양입니다. 이 값은 HTML5 사양의 제안에 불과하지만 놀랍게도 모든 브라우저에서 동일합니다. 데이터를 원래 형식으로 저장하는 것이 아니라 문자열을 저장한다는 점을 이해해야 합니다. 많은 정수나 부동 소수점 숫자를 저장하는 경우 표현의 차이가 클 수 있습니다. 부동 소수점 숫자의 각 숫자는 이러한 숫자에 대한 일반적인 표현이 아닌 문자로 저장됩니다.
"QUOTA_EXCEEDED_ERR"은 5MB 할당량을 초과하는 경우 발생하는 예외입니다. "아니요"는 다음 질문에 대한 대답입니다. "사용자에게 더 많은 저장 공간을 요청할 수 있습니까?" 작성 당시 브라우저는 웹 개발자가 더 많은 저장 공간을 요청할 수 있는 메커니즘을 구현하지 않습니다. 일부 브라우저(예: Opera)에서는 사용자가 사이트별 스토리지 할당량을 제어할 수 있지만 이는 순전히 사용자 주도적이며 개발자가 웹 애플리케이션에 구축할 수 있는 것과 관련이 없습니다.
작동 중인 HTML5 스토리지
작동 중인 HTML5 스토리지를 살펴보겠습니다. 그림 장에서 만든 것으로 돌아가 봅시다. 이 게임에는 작은 문제가 있습니다. 게임 도중에 브라우저 창을 닫으면 결과가 손실됩니다. 그러나 HTML5 스토리지를 사용하면 브라우저 자체에서 게임을 제자리에 저장할 수 있습니다. 데모를 열고 몇 가지 이동을 하고 브라우저 탭을 닫았다가 다시 엽니다. 브라우저가 HTML5 스토리지를 지원하는 경우 데모 페이지는 이동 횟수, 보드에서 각 조각의 위치, 선택한 조각을 포함하여 게임 내 정확한 위치를 마술처럼 기억합니다.
어떻게 작동합니까? 게임에 변경 사항이 있을 때마다 이 함수를 호출합니다.
함수 saveGameState() (
localStorage["halma.game.in.progress"] = gGameInProgress;
(변수 i = 0; 나는< kNumPieces; i++) {
localStorage["할마.피스." + i + ".row"] = gPieces[i].row;
localStorage["할마.피스." + i + ".column"] = gPieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
true를 반환합니다.
}
보시다시피 localStorage 개체는 게임 진행 상황을 저장하는 데 사용됩니다(gGameInProgress, 부울). 그런 다음 모든 칩이 정렬됩니다(gPieces, 자바스크립트 배열) 각각에 대한 행과 열을 저장합니다. 그 후, 현재 선택된 조각(gSelectedPieceIndex, 정수), 긴 점프 시리즈의 중간에 있는 조각(gSelectedPieceHasMoved, boolean) 및 총 수이동합니다(gMoveCount, 정수).
페이지가 로드될 때 모든 변수를 원래 값으로 반환하는 newGame() 함수를 자동으로 호출하는 대신 resumeGame() 을 호출합니다. resumeGame() 함수는 HTML5 저장소를 사용하여 로컬 저장소의 게임 상태를 확인합니다. 존재하는 경우 localStorage 객체를 사용하여 값을 복원합니다.
함수 재개 게임() (
if (!supportsLocalStorage()) (거짓 반환;)
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) (거짓 반환;)
gPieces = 새로운 배열(kNumPieces);
(변수 i = 0; 나는< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
var 열 = parseInt(localStorage["halma.piece." + i + ".column"]);
gPieces[i] = 새 셀(행, 열);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "참";
gMoveCount = parseInt(localStorage["halma.movecount"]);
드로보드();
true를 반환합니다.
}
이 기능의 가장 중요한 부분은 이 장의 앞부분에서 언급한 주의 사항이며 여기서 반복할 것입니다. 데이터는 문자열로 저장됩니다. 문자열이 아닌 다른 것을 저장하는 경우 문자열을 가져올 때 변환해야 합니다. 예를 들어 게임 진행 중 플래그(gGameInProgress)는 부울입니다. saveGameState() 함수에서 우리는 단지 그것을 저장하고 데이터 유형에 대해 걱정하지 않습니다.
localStorage["halma.game.in.progress"] = gGameInProgress;
그러나 resumeGame() 함수에서 로컬 저장소에서 검색된 값을 문자열로 간주하고 수동으로 자체 부울 값을 구성해야 합니다.
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
마찬가지로 이동 횟수는 gMoveCount에 정수로 저장되며 saveGameState() 함수에서 간단히 저장합니다.
localStorage["halma.movecount"] = gMoveCount;
그러나 resumeGame() 함수에서 내장된 값을 사용하여 값을 정수로 변환해야 합니다. 자바스크립트 기능 parseInt() .
gMoveCount = parseInt(localStorage["halma.movecount"]);
키/값 쌍을 넘어서: 경쟁 비전
역사적으로 많은 트릭과 해결 방법이 있었지만 HTML5 스토리지의 현재 상태는 놀라울 정도로 안전합니다. 새로운 API는 표준화되었으며 모든 주요 브라우저, 플랫폼 및 장치에 포함되었습니다. 웹 개발자의 경우 매일 그것을 볼 수는 없습니까? 그러나 "5MB의 키/값 쌍" 이상이며 영구 로컬 스토리지의 미래는... 말하자면... 경쟁적 비전입니다.
하나의 비전은 이미 알고 있는 SQL의 약어입니다. 2007년 Google은 오픈 소스 크로스 브라우저 플러그인인 Gears를 출시했습니다. 소스 코드, 포함된 SQLite 기반 데이터베이스를 포함합니다. 이 초기 프로토타입은 나중에 Web SQL Database 사양 작성에 영향을 미쳤습니다. Web SQL Database(이전의 "WebDB")는 JavaScript에서 다음 작업을 수행할 수 있도록 하는 SQL Database에 대한 씬 래퍼를 제공합니다.
openDatabase("문서", "1.0", "로컬 문서 저장소", 5*1024*1024, 함수(db)(
db.changeVersion("", "1.0", 함수(t)(
t.executeSql("CREATE TABLE 문서 ID(ID, 이름)");
), 오류);
});
보시다시피 대부분의 작업은 ExecuteSQL 메서드와 함께 수행됩니다. 이 문자열은 SELECT, UPDATE, INSERT 및 DELETE를 포함한 모든 SQL 명령을 지원할 수 있습니다. JavaScript로 하는 것을 제외하고는 서버 측 데이터베이스 프로그래밍과 같습니다! 오 기쁨!
Web SQL 데이터베이스 사양은 4개의 브라우저와 플랫폼에서 구현되었습니다.
| 즉 | 파이어폭스 | 원정 여행 | 크롬 | 오페라 | 아이폰 | 기계적 인조 인간 |
| – | – | 4.0+ | 4.0+ | 10.5+ | 3.0+ | 2.0+ |
물론 인생에서 둘 이상의 데이터베이스를 사용한 적이 있다면 "SQL"이 어렵고 빠른 것보다 마케팅 용어에 가깝다는 것을 알고 있습니다. 빠른 표준(누군가 HTML5에 대해 같은 말을 할 수도 있지만 그것은 중요하지 않습니다). 물론 실제 SQL 사양(SQL-92라고 함)이 있지만 이 사양만 준수하는 데이터베이스 서버는 세상에 없습니다. 있다 오라클 SQL, 마이크로소프트 SQL, SQL에서 MySQL, SQL에서 PostgreSQL, SQL에서 SQLite. 사실, 이러한 각 제품은 시간이 지남에 따라 새로운 기능을 추가합니다. SQL 함수, 따라서 "SQLite의 SQL"이라고 말하는 것만으로는 충분하지 않습니다. "SQLite 버전 X.Y.Z와 함께 제공되는 SQL 버전"이라고 말해야 합니다.
이 모든 것이 현재 Web SQL 사양의 맨 위에 있는 다음 주의 사항으로 안내합니다.
사양은 막다른 골목에 도달했습니다. 관심 있는 모든 개발자는 서버 측 SQL(SQLite)을 사용하지만 표준화 경로를 따라 이동하려면 몇 가지 독립적인 구현이 필요합니다. 다른 개발자들이 이 사양을 구현하는 데 관심이 있는 동안 SQL 언어에 대한 설명은 표준에서 허용하지 않는 Sqlite에 대한 단순한 참조로 남겨졌습니다.
이러한 배경에서 저는 웹 애플리케이션을 위한 고급 영구 로컬 스토리지에 대한 또 다른 경쟁력 있는 비전에 대해 말씀드리겠습니다. 이전에는 "WebSimpleDB"로 알려졌던 Indexed Database API는 현재 IndexedDB로 애칭을 부르고 있습니다.
Indexed Database API는 SQL 데이터베이스에서 차용한 많은 아이디어와 함께 객체 저장소라고 하는 것을 제공합니다. "레코드"가 있는 "데이터베이스"가 있으며 각 레코드에는 특정 수의 "필드"가 있습니다. 각 필드에는 데이터베이스가 생성될 때 정의되는 특정 데이터 유형이 있습니다. 항목의 일부를 선택한 다음 "커서"로 나열할 수 있습니다. 개체 저장소에 대한 변경 사항은 "트랜잭션"으로 처리됩니다.
SQL 데이터베이스를 프로그래밍한 적이 있다면 이러한 용어가 익숙할 것입니다. 주요 차이점은 개체 저장소에 구조화된 쿼리 언어가 없다는 것입니다. "SELECT * from USERS where ACTIVE = "Y""와 같은 조건을 작성하지 않습니다. 대신 개체 저장소에서 제공하는 메서드를 사용하여 USERS 데이터베이스를 열고, 레코드를 열거하고, 레코드를 필터링하고, 접근자 메서드를 사용하여 나머지 레코드의 각 필드 값을 가져옵니다. IndexedDB의 초기 연습은 IndexedDB가 작동하는 방식과 IndexedDB를 Web SQL과 비교하는 방식에 대한 좋은 가이드입니다.
작성 당시 IndexedDB는 Firefox 4 베타에서만 구현되었으며 Mozilla는 Web SQL을 구현하지 않을 것이라고 밝혔습니다. Google은 Chromium에 대한 IndexedDB 지원을 고려하고 있다고 밝혔습니다. 구글 크롬. 그리고 Microsoft조차도 IndexedDB가 "웹을 위한 훌륭한 솔루션"이라고 말했습니다.
웹 개발자로서 IndexedDB로 무엇을 할 수 있습니까? 에 이 순간기술 시연에 불과합니다. 1년 안에? 아마도.
그만큼 웹 스토리지 API브라우저가 쿠키를 사용하는 것보다 훨씬 더 직관적인 방식으로 키/값 쌍을 저장할 수 있는 메커니즘을 제공합니다.
웹 스토리지 개념 및 사용법
Web Storage 내의 두 가지 메커니즘은 다음과 같습니다.
- sessionStorage는 페이지 세션 기간 동안 사용할 수 있는 각 출처에 대해 별도의 저장 영역을 유지 관리합니다(페이지 다시 로드 및 복원을 포함하여 브라우저가 열려 있는 한).
- 세션에 대한 데이터만 저장합니다. 즉, 브라우저(또는 탭)가 닫힐 때까지 데이터가 저장됩니다.
- 데이터는 서버로 전송되지 않습니다.
- 저장 제한이 쿠키보다 큽니다(최대 5MB).
- localStorage는 동일한 작업을 수행하지만 브라우저를 닫았다가 다시 열어도 지속됩니다.
- 만료 날짜 없이 데이터를 저장하고 JavaScript를 통해서만 삭제되거나 브라우저 캐시/로컬에 저장된 데이터를 삭제합니다.
- 저장 한도는 세 가지 중 최대입니다.
명세서
| 사양 | 상태 | 논평 |
|---|---|---|
| HTML 생활 표준 | 생활 수준 |
브라우저 호환성
창.localStorage
https://github.com/mdn/browser-compat-data를 방문하여 pull 요청을 보내주십시오.
| 데스크탑 | 이동하는 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 크롬 | 가장자리 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 원정 여행 | 안드로이드 웹뷰 | 안드로이드용 크롬 | 안드로이드용 파이어폭스 | 안드로이드용 오페라 | iOS의 사파리 | 삼성인터넷 | |
| 로컬 스토리지 | 크롬 전체 지원 4 | 에지 전체 지원 12 | 파이어폭스 전체 지원 3.5 | IE 전체 지원 8 | 오페라 전체 지원 10.5 | 사파리 전체 지원 4 | ||||||
전설
전폭적인 지원전폭적인 지원창.세션 저장소
이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 리퀘스트를 보내주세요.
GitHub에서 호환성 데이터 업데이트
| 데스크탑 | 이동하는 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 크롬 | 가장자리 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 원정 여행 | 안드로이드 웹뷰 | 안드로이드용 크롬 | 안드로이드용 파이어폭스 | 안드로이드용 오페라 | iOS의 사파리 | 삼성인터넷 | |
| 세션 스토리지 | 크롬 전체 지원 5 | 에지 전체 지원 12 | 파이어폭스 전체 지원 2 | IE 전체 지원 8 | 오페라 전체 지원 10.5 | 사파리 전체 지원 4 | WebView Android 전체 지원 예 | Chrome Android 전체 지원 예 | Firefox Android 전체 지원 예 | 오페라 안드로이드 전체 지원 11 | 사파리 iOS 전체 지원 3.2 | Samsung Internet Android 전체 지원 있음 |
전설
전폭적인 지원전폭적인 지원프라이빗 브라우징 / 시크릿 모드
대부분의 최신 브라우저는 "시크릿", "프라이빗 브라우징" 또는 이와 유사한 데이터를 기록 및 쿠키와 같은 데이터를 저장하지 않는 개인 정보 보호 옵션을 지원합니다. 이것은 명백한 이유로 Web Storage와 근본적으로 호환되지 않습니다. 따라서 브라우저 공급업체는 다양한 실험을 하고 있습니다. 이 비호환성을 처리하는 방법에 대한 시나리오.
대부분의 브라우저는 스토리지 API를 계속 사용할 수 있고 완전히 작동하는 것처럼 보이는 전략을 선택했지만 브라우저가 닫힌 후 저장된 모든 데이터가 지워진다는 한 가지 큰 차이점이 있습니다. 이러한 브라우저의 경우 기존 저장된 데이터(일반 검색 세션에서)로 수행해야 하는 작업에 대해 여전히 다른 해석이 있습니다. 개인 모드에서 읽을 수 있어야 합니까? 그런 다음 스토리지를 사용할 수 있지만 비어 있고 할당량이 0바이트로 할당되어 데이터 쓰기가 사실상 불가능한 솔루션을 선택한 브라우저, 특히 Safari가 있습니다.
개발자는 이러한 다양한 구현을 알고 있어야 하며 Web Storage API에 따라 웹 사이트를 개발할 때 이를 고려해야 합니다. 자세한 내용은 이 주제를 구체적으로 다루는 WHATWG 블로그 게시물을 참조하십시오.
브라우저에서 HTML5 LocalStorage에 대한 이야기가 포함된 기사를 보냈습니다. 그에게 바닥을 줍시다.
localStorage 기술을 사용하는 가장 간단하고 이해하기 쉬운 가이드를 작성하려고 했습니다. 이 기사는 기술 자체와 작업 수단 모두 복잡한 것을 수행하지 않기 때문에 아주 작은 것으로 판명되었습니다. 시작하려면 JavaScript를 약간만 알면 됩니다. 따라서 이 기사에 10분을 주면 이력서에 "나는 localStorage로 작업하는 방법을 알고 있습니다"라는 줄을 안전하게 추가할 수 있습니다.
로컬스토리지란?
JavaScript 객체는 다음과 같습니다.
Var myCar = ( 바퀴: 4, 도어: 4, 엔진: 1, 이름: "재규어")
그리고 이것이 JSON의 모습입니다. 일반 js 객체와 거의 동일하지만 모든 속성만 따옴표로 묶어야 합니다.
( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101 ), "전화번호": [ "812 123-1234", "916 123-4567" ] )
localStorage가 무엇인지 이해하려면 브라우저 어딘가에 우리가 사용할 수 있는 객체가 있다고 상상해 보세요. 동시에이 객체는 페이지를 다시로드하거나 브라우저를 완전히 닫더라도 거기에 쓰는 값을 지우지 않습니다.
말을 하자면 자바스크립트, localStorage는 브라우저(창)의 전역 객체 속성입니다. window.localStorage 또는 localStorage로 액세스할 수 있습니다.
브라우저에 sessionStorage라고 하는 localStorage의 복제본이 있다는 점도 언급할 가치가 있습니다. 유일한 차이점은 후자는 하나의 탭(세션)에 대한 데이터만 저장하고 탭을 닫는 즉시 공간을 지울 것이라는 점입니다.
그의 라이브를 보자. 예를 들어 Google Chrome에서 DevTools(F12)를 열고 "리소스" 탭으로 이동하면 왼쪽 패널에 이 도메인에 대한 localStorage와 여기에 포함된 모든 값이 표시됩니다.
그건 그렇고, localStorage가 도메인과 어떻게 작동하는지 알아야 합니다. 각 도메인에 대해 브라우저는 자체 localStorage 객체를 생성하며 해당 도메인에서만 편집하거나 볼 수 있습니다. 예를 들어 mydomain-1.com은 mydomain-2.com의 localStorage에 액세스할 수 없습니다.
왜 localStorage가 필요합니까?
LocalStorage는 사용자 세션 간에 특정 데이터를 저장하는 한 가지에만 필요합니다. 브라우저의 로컬 저장소에 저장할 수 있는 항목은 천 가지입니다. 예를 들어, 그것을 저장으로 사용하는 브라우저 게임, 사용자가 동영상을 보다가 멈추는 순간을 기록하는 것, 다양한 형태의 데이터 등.
localStorage를 시작하려면 어떻게 해야 합니까?
매우 간단합니다.
localStorage로 작업하는 것은 JavaScript에서 객체로 작업하는 것과 매우 유사합니다. 몇 가지 방법이 있습니다.
localStorage.setItem("키", "값")
localStorage에 추가하는 메소드 새 키값으로(그리고 그러한 키가 이미 존재하는 경우 새 값으로 덮어씁니다.) 예를 들어 localStorage.setItem('myKey', 'myValue');
localStorage.getItem("키")
키로 저장소에서 특정 값을 가져옵니다.
localStorage.removeItem("키")
키 삭제
localStorage.clear()
모든 저장 공간 지우기
이제 브라우저의 localStorage로 탭을 열고 이 저장소에서 직접 데이터를 작성하고 검색하는 연습을 할 수 있습니다. 있다면 모든 코드를 js 파일에 작성합니다.
//값 추가 또는 변경: localStorage.setItem("myKey", "myValue"); //이제 localStorage에 값 "myValue"가 저장된 "myKey" 키가 있습니다. //콘솔에 인쇄합니다. var localValue = localStorage.getItem("myKey"); console.log(로컬값); //"myValue" //삭제: localStorage.removeItem("myKey"); //모든 저장소 지우기 localStorage.clear() 동일하지만 대괄호 사용: localStorage["Key"] = "Value" //localStorage["Key"]의 값 설정 //값 가져오기 delete localStorage["Key" ] // 값 삭제
또한 localStorage는 객체와 같은 중첩 구조에서 잘 작동한다는 점에 주목하고 싶습니다.
//객체 생성 var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); // 직렬화 localStorage.setItem("myKey", serialObj); // "myKey" 키로 스토리지에 씁니다. var returnObj = JSON.parse(localStorage.getItem("myKey")) // 다시 객체로 구문 분석합니다.
또한 브라우저는 localStorage에 5MB를 할당한다는 점에 유의해야 합니다. 그리고 그것을 초과하면 QUOTA_EXCEEDED_ERR 예외가 발생합니다. 그건 그렇고, 그것의 도움으로 저장 공간에 아직 공간이 있는지 확인할 수 있습니다.
( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("제한 초과"); ) )
결론 대신
개발자들이 이 짧은 기사에서 이 기술이미 Might와 main을 프로젝트에서 사용할 수 있습니다. 그것은 좋은 표준화와 훌륭한 지원을 가지고 있으며 시간이 지남에 따라 발전합니다.