클라이언트에 데이터를 저장하면 많은 문제를 해결하고 불필요한 데이터 전송을 줄일 수 있습니다.
1. 프로그램의 상태를 저장할 수 있습니다. 사용자는 브라우저를 닫고 열린 후 자신이 작동하는 위치를 알 수 있습니다.
2. 데이터 캐시 데이터 : 매번 서버에서 변경되지 않는 많은 데이터를 얻을 필요가 없습니다.
3. 사용자 환경 설정을 저장할 수 있습니다. 이러한 종류의 데이터는 일반적으로 서버에 존재할 필요가 없습니다.
이전 관행HTML5 로컬 스토리지 이전에 클라이언트에 영구 데이터를 저장하려면 몇 가지 옵션이 있습니다.
1. HTTP 쿠키. HTTP 쿠키의 단점은 분명합니다. 최대 4KB의 데이터 만 저장할 수 있으며 각 HTTP 요청은 서버로 다시 전송되고 일반 텍스트를 전송합니다 (SSL을 사용하지 않는 한).
2. IE userData. UserData는 1990 년대 브라우저 전쟁 중에 Microsoft가 시작한 로컬 스토리지 솔루션입니다. DHTML의 동작 속성을 사용하여 로컬 데이터를 저장하므로 각 페이지가 사이트 당 최대 64K 데이터와 최대 640K 데이터를 저장할 수 있습니다. userData의 단점은 분명합니다. 웹 표준의 일부가 아닙니다. 귀하의 프로그램이 IE를 지원하기 만하면되면 기본적으로 쓸모가 없습니다.
3. 플래시 쿠키. 플래시 쿠키는 실제로 HTTP 쿠키와 동일하지 않습니다. 아마도 그 이름은 플래시 로컬 스토리지 일 것입니다. 플래시 쿠키를 사용하면 각 사이트가 기본적으로 100k 이하의 데이터를 저장할 수 있습니다. 그것을 초과하면 Flash는 사용자에게 더 큰 저장 공간을 자동으로 요청합니다. Flash의 외부 인터페이스 인터페이스를 사용하면 JavaScript를 통해 Flash의 로컬 스토리지를 쉽게 작동 할 수 있습니다. 플래시의 문제는 플래시이기 때문에 매우 간단합니다.
4. Google 기어스. Gears는 2007 년 Google에서 출시 된 오픈 소스 브라우저 플러그인으로, 주요 브라우저의 호환성을 향상시키기위한 것입니다. Gears에는 SQLITE를 기반으로 내장 된 내장 SQL 데이터베이스가 있으며 데이터베이스에 액세스 할 수있는 통합 API를 제공합니다. 사용자 인증을받은 후 각 사이트는 SQL 데이터베이스에 무제한 데이터를 저장할 수 있습니다. Gears의 문제는 Google 자체가 더 이상 사용하지 않는다는 것입니다.
눈부신 다양한 기술은 브라우저 호환성 문제로 이어집니다. 여기에서 가장 일반적인 쿠키는 쿠키 일 수 있습니다.
HTML5의 새로운 경험위의 문제에 대한 응답으로 HTML5는보다 이상적인 솔루션을 제공합니다. 키/값 쌍을 사용하여 간단히 해결할 수있는 데이터를 저장 해야하는 경우 웹 스토리지를 사용할 수 있습니다.
쿠키와 비교하여 웹 스토리지에는 다음과 같이 요약 된 많은 장점이 있습니다.
1. 더 큰 저장 공간 : IE8의 각 독립적 인 저장 공간은 10m이고 다른 브라우저는 구현이 약간 다르지만 쿠키보다 훨씬 큽니다.
2. 저장된 컨텐츠는 서버로 전송되지 않습니다. 쿠키가 설정되면 쿠키의 내용은 서버의 요청과 함께 전송됩니다. 이는 로컬로 저장된 데이터에 대한 대역폭 낭비입니다. 웹 스토리지의 데이터는 로컬로만 존재하며 서버와 상호 작용하지 않습니다.
3.보다 풍부하고 사용하기 쉬운 인터페이스 : 웹 스토리지는 더 풍부한 인터페이스 세트를 제공하여 데이터 작동을보다 쉽게 할 수 있습니다.
4. 독립 저장 공간 : 각 도메인 (하위 도메인 포함)에는 독립적 인 저장 공간이 있으며 각 스토리지 공간에는 완전히 독립적이므로 데이터 혼동이 발생하지 않습니다.
웹 스토리지 분류웹 스토리지는 실제로 SessionStorage와 LocalStorage의 두 부분으로 구성됩니다.
SessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용되며 동일한 세션의 페이지에서만 액세스 할 수 있으며 세션이 완료된 후에는 데이터가 파괴됩니다. 따라서 SessionStorage는 지속적인 로컬 스토리지가 아니라 세션 수준 스토리지 일뿐입니다.
LocalStorage는 영구적 인 로컬 스토리지에 사용되며 데이터가 적극적으로 삭제되지 않으면 만료되지 않습니다.
웹 스토리지가 지원되는지 확인하십시오웹 스토리지는 주요 주류 브라우저에서 지원되지만 이전 브라우저와 호환 되려면이 기술을 사용할 수 있는지 확인해야합니다.
첫 번째 방법 : 스토리지 개체가 존재하는지 확인하여 브라우저가 웹 스토리지를 지원하는지 확인하십시오.
if (typeof (Storage)! == "undefined") {
// 예! LocalStorage 및 SessionStorage 지원!
// 일부 코드 ...
} 또 다른 {
// 죄송합니다! 웹 스토리지 지원이 없음 ..
}
두 번째 방법은 LocalStorage가이를 지원하는지 확인하는 것과 같은 각 객체를 개별적으로 확인하는 것입니다.
if (typeof (localStorage) == 'undefined') {
ALERT ( '브라우저는 HTML5 LocalStorage를 지원하지 않습니다. 업그레이드를 시도해보십시오.');
} 또 다른 {
// 예! LocalStorage 및 SessionStorage 지원!
// 일부 코드 ...
}
또는:
if (Window && Window [ 'localStorage']! == null) {if ( 'localStorage'
// 예! LocalStorage 및 SessionStorage 지원!
// 일부 코드 ...
} 또 다른 {
ALERT ( '브라우저는 HTML5 LocalStorage를 지원하지 않습니다. 업그레이드를 시도해보십시오.');
}
또는
if (!! localstorage) {
// 예! LocalStorage 및 SessionStorage 지원!
// 일부 코드 ...
} 또 다른 {
ALERT ( '브라우저는 HTML5 LocalStorage를 지원하지 않습니다. 업그레이드를 시도해보십시오.');
}
분명히 첫 번째 방법은 가장 직접적이고 단순합니다.
웹 스토리지 사용웹 스토리지는 키 값 쌍을 저장하고 브라우저는 문자열로 저장합니다. 필요한 경우 다른 형식으로 변환해야합니다.
SessionStorage 및 LocalStorage의 다양한 사용을 제외하고 회원 목록은 동일합니다.
키 = 값 : 키 값 쌍을 저장합니다
setitem (키, 값) : 키 값 쌍을 저장합니다
getItem (키) : 키 값 쌍을 얻으십시오
removeItem (키) : 모든 키 값 쌍을 제거하십시오
CLEAR () : 모든 키 값 쌍을 지우십시오
길이 : 키 값 쌍의 수
여기서 우리는 여전히 강조해야합니다. setitem (key, value) 메소드의 값 유형은 이론적으로 모든 유형 일 수 있지만 실제로 브라우저는 값 tostring 메소드를 호출하여 문자열 값을 얻고 로컬로 저장합니다. 따라서 사용자 정의 유형 인 경우 의미있는 Tostring 메소드를 직접 정의해야합니다. 예를 들어, 다음 예제는 json.stringify와 함께 사용됩니다.
var person = { 'name': 'Rainman', 'Age': 24};
LocalStorage.setitem ( "me", json.stringify (person));
json.parse (localstorage.getitem ( 'me')). 이름; // 'Rainman'
/**
* json.stringify, json 데이터를 문자열로 변환하십시오
* json.stringify ({ 'name': 'fred', 'age': 24}); // '{ "name": "fred", "age": 24}'
* json.stringify ([ 'a', 'b', 'c']); // '[ "a", "b", "c"]' '
* JSON.PARSE, json.stringify 방지 방지
* json.parse ( '[ "A", "B", "C"])) // [ "A", "B", "C"]
*/
또한 키 값 쌍을 추가 할 때 추가 수가 큰 경우 한계를 초과하는 예외가 있는지 확인하는 것이 더 안전합니다.
노력하다 {
localStorage.setItem (itemId, value.join ( ';'));
} catch (e) {
if (e == quota_exceeded_err) {
경고 ( '할당량 초과!');
}
}
웹 스토리지 방법은 매우 간단합니다. 다음 예는 버튼의 클릭 수를 계산하는 것입니다.
<! doctype html>
<html>
<헤드>
<cript>
함수 clickCounter ()
{
if (typeof (Storage)! == "undefined")
{
if (localStorage.clickCount)
{
localStorage.clickCount = 번호 (localStorage.clickCount) +1;
}
또 다른
{
localstorage.clickCount = 1;
}
document.getElementById ( "result"). innerHtml = "버튼을 클릭했습니다.
}
또 다른
{
hoceb
}
}
</스크립트>
</head>
<body>
<p> <button onclick = "clickCounter ()"type = "button"> 나를 클릭하십시오! </button> </p>
<div id = "result"> </div>
<p> 카운터 증가를 보려면 버튼을 클릭하십시오. </p>
<p> 브라우저 탭 (또는 창)을 닫고 다시 시도하면 카운터가 계속 계산됩니다 (재설정되지 않음) </p>
</body>
</html>
위의 예에서는 LocalStorage를 SessionStorage로 변경하고 버튼을 여러 번 클릭하고 브라우저를 닫기 전후에 효과를 확인할 수 있습니다.
기존 문제웹 스토리지의 결함은 주로 보안에 집중되어 있으며 다음 두 가지 점에 반영됩니다.
1. 브라우저는 각 도메인에 대해 독립적 인 저장 공간을 할당합니다. 즉, 스크립트는 도메인 A의 도메인 B의 저장 공간에 액세스 할 수 없지만 브라우저는 스크립트가 위치한 도메인이 현재 도메인과 동일한 지 확인하지 않습니다. 즉, 도메인 B에 도메인 A에 내장 된 스크립트는 도메인 B의 데이터에 여전히 액세스 할 수 있습니다.
2. 로컬로 저장된 데이터는 암호화되지 않았으며 결코 만료되지 않으므로 개인 정보 유출을 유발하기가 매우 쉽습니다.
또한 더 많은 보안 관련 문제는 나중에 실제 참조의 링크를 참조하십시오.
다른 사양 목록 (이해하기 위해 언제든지 사라질 수 있음)웹 데이터베이스
기존 HTML5 제안에서 복잡한 데이터를 저장 해야하는 경우 클라이언트 프로그램처럼 SQL을 사용할 수있는 웹 데이터베이스를 사용할 수 있습니다 (웹 데이터베이스 표준이 포기되었으므로 여기에 간단한 언급이 있습니다). GlobalStorage이것은 HTML5에서도 제안됩니다. 브라우저가 닫힌 후에는 GlobalStorage를 사용하여 저장된 정보를 여전히 유지할 수 있습니다. LocalStorage와 마찬가지로 도메인의 모든 페이지에 저장된 정보는 모든 페이지에서 공유 할 수 있지만 현재 Firefox 만 지원합니다.
기본 구문 :
• GlobalStorage [ 'Developer.mozilla.org'] - Developer.mozilla.org의 모든 하위 도메인은이 네임 스페이스 스토리지 개체를 통해 읽고 쓸 수 있습니다.
• GlobalStorage [ 'mozilla.org'] - mozilla.org 도메인 이름의 모든 웹 페이지는이 네임 스페이스 스토리지 개체를 통해 읽고 쓸 수 있습니다.
• GlobalStorage [ 'org'] - .org 도메인 이름의 모든 웹 페이지는이 네임 스페이스 스토리지 개체를 통해 읽고 쓸 수 있습니다.
• GlobalStorage [ ''] -이 네임 스페이스 스토리지 개체를 통해 모든 도메인 이름의 모든 웹 페이지를 읽고 쓸 수 있습니다.
메소드 속성 :
• setitem (키, 값) - 키 값을 설정하거나 재설정합니다.
• getItem (키) - 키 값을 가져옵니다.
• removeItem (키) - 키 값을 제거합니다.
• 키 값을 설정하십시오 : window.globalstorage [planabc.net] .key = value;
• 키 값을 가져옵니다 : value = wind
기타 기능 :
• 만료 시간은 LocalStorage와 동일하며 다른 기능은 LocalStorage 와도 유사합니다.
• Firefox는 이제 현재 도메인의 GlobalStorage 스토리지 만 지원합니다. 공통 도메인을 사용하면 유사한 오류 보안 오류 코드가 발생합니다.
indexeddb마지막으로 INDEXEDDB를 소개하려고합니다. 다른 두 사양과 비교할 때 Firefox 만 현재 IndexEdDB를 구현하고 있습니다 (Mozilla는 Web SQL 데이터베이스를 구현하지 않을 것이라고 밝혔지만 Google은 Chrome에 IndexDB 지원을 추가하는 것을 고려하고 있다고 말했습니다.
IndexEddb는 데이터베이스에 레코드를 저장할 수있는 SQL 데이터베이스와 비슷한 개체 스토어의 개념을 소개하며 각 레코드에는 많은 필드가있을 수 있으며 각 필드에는 특정 데이터 유형이 있으며 레코드의 하위 집합을 선택하고 커서와 트랜스 업 스토어의 모든 변경 사항은 트랜잭션 기반입니다.
자세한 내용은 나중에 사용 참조의 Firefox의 IndexedDB에 관한 문서를 참조하십시오.
실제 참조 :공식 문서 : http://www.w3schools.com/html5/
템플릿 걱정 : http://www.cuoxin.com/w3school/html5/
로컬 스토리지의 보안 : http://www.mhtml5.com/2012/03/4586.html
Firefox의 실험 기능 indexeddb : https://developer.mozilla.org/en-us/docs/indexeddb