웹 스토리지

Web storage
온라인 파일 호스팅에 대한 내용은 파일 호스팅 서비스를 참조하십시오.
HTML
비교

DOM 저장소(Document Object Model storage)라고도 하는 웹 저장소는 웹 앱에 클라이언트측 데이터를 저장하는 방법과 프로토콜을 제공한다.웹 스토리지는 쿠키와 유사하지만 용량이[1] 크게 향상되고 HTTP 요청 헤더로 전송되는 정보가 없는 영구 데이터 스토리지를 지원한다.[2]두 가지 주요 웹 스토리지 유형이 있는데, 로컬 스토리지와 세션 스토리지로 각각 영구 쿠키와 세션 쿠키와 비슷하게 동작한다.웹 스토리지는 W3C([3]World Wide Web Consortium)와 WHTWG가 표준화하고 있으며,[4] 모든 주요 브라우저가 지원한다.

특징들

웹 저장소는 몇 가지 중요한 면에서 쿠키와 다르다.

목적

쿠키는 서버와의 통신을 위한 것으로, 모든 요청에 자동으로 추가되며 서버와 클라이언트 측에서 모두 액세스할 수 있다.웹 스토리지는 전적으로 클라이언트측 스크립팅의 권한에 속한다.웹 저장소 데이터는 모든 HTTP 요청에서 서버에 자동으로 전송되지 않으며, 웹 서버는 웹 저장소에 직접 쓸 수 없다.그러나 이러한 효과 중 하나는 명시적 클라이언트측 스크립트로 달성할 수 있어 서버의 원하는 상호작용을 미세 조정할 수 있다.

저장소 크기

쿠키는 4킬로바이트로 제한된다.훨씬 더 큰 스토리지 용량을 제공하는 웹 스토리지:

로컬 및 세션 스토리지

웹 스토리지는 범위와 수명이 다른 두 가지 스토리지 영역, 즉 로컬 스토리지와 세션 스토리지를 제공한다.로컬 스토리지에 저장된 데이터는 오리진별로, 즉 동일한 오리진 정책에 정의된 프로토콜, 호스트 이름 및 포트 번호의 조합이다.데이터는 이전에 데이터를 저장한 원본과 동일한 원본의 페이지에서 로드된 모든 스크립트에 사용할 수 있으며 브라우저가 닫힌 후에도 계속 유지된다.따라서 웹 스토리지는 쿠키 취약 무결성 및 취약 기밀성 문제로 인해 영향을 받지 않는다. RFC6265 섹션 8.5 및 8.6.세션 저장소는 원본 및 인스턴스당(창당 또는 탭당)이며 인스턴스의 수명으로 제한된다.세션 저장소는 동일한 웹 앱의 개별 인스턴스가 서로 간섭하지 않고 서로 다른 창에서 실행되도록 하기 위한 것으로 쿠키가 제대로 지원하지 않는 사용 사례다.[9]

인터페이스 및 데이터 모델

웹 스토리지는 키와 값이 모두 문자열인 연관 배열 데이터 모델을 노출하기 때문에 쿠키보다 더 나은 프로그래밍 인터페이스를 제공한다.W3C Web Applications Working Group은 구조화된 데이터에 액세스하기 위한 추가 API를 고려하고 있다.[10]

사용법

웹 스토리지를 지원하는 브라우저에 글로벌 개체가 있음sessionStorage그리고localStorage창구 레벨에서 선언되었다.이러한 브라우저에서는 다음과 같은 JavaScript 코드를 사용하여 웹 저장소 동작을 트리거할 수 있다.

// 세션 기간 동안 브라우저에 값 저장 세션저장소.세티템('키', '가치');  // 값 검색(브라우저를 닫았다가 다시 열 때 삭제됨) ... 빈틈이 없는(세션저장소.게티템('키'));  // 세션 기간 이후 브라우저에 값 저장 localStorage.세티템('키', '가치');  // 값 검색(브라우저를 닫았다가 다시 연 후에도 지속성) 빈틈이 없는(localStorage.게티템('키'));

문자열만 Storage API를 통해 저장할 수 있다.[11]다른 데이터 유형을 저장하려고 하면 대부분의 브라우저에서 문자열로 자동 변환된다.그러나 JSON으로 변환하면 JavaScript 객체를 효과적으로 저장할 수 있다. 

// 문자열 대신 개체 저장 localStorage.세티템('키', {이름을 붙이다: '가치'}); 빈틈이 없는(활자의 localStorage.게티템('키')); // 문자열  // 문자열 대신 정수 저장 localStorage.세티템('키', 1); 빈틈이 없는(활자의 localStorage.게티템('키')); // 문자열  // JSON을 사용하여 개체 저장 localStorage.세티템('키', 제이슨.끈으로 묶다({이름을 붙이다: '가치'})); 빈틈이 없는(제이슨.파스를 치다(localStorage.게티템('키')).이름을 붙이다); // 값

명명법

W3C 초안의 제목은 "웹 스토리지"이다."DOM 스토리지"는 비록 점점 줄어들어 가고 있지만, 일반적으로 사용되는 이름이기도 했다. 예를 들어, 모질라 및 마이크로소프트 개발자 사이트의 "DOM 스토리지" 웹 기사는 "Web Storage" 기사로 대체되었다.[12][13][14][15]

DOM 저장소의 "DOM"은 문자 그대로 Document Object Model을 지칭하지 않는다.W3C에 따르면, "DOM이라는 용어는 웹 애플리케이션에서 스크립트가 사용할 수 있도록 만든 API 세트를 지칭하기 위해 사용되며, 반드시 실제 문서 객체의 존재를 의미하지는 않는다.."[16]

웹 스토리지 관리

웹 스토리지 개체의 저장은 현재 버전의 모든 지원 웹 브라우저에서 기본적으로 활성화되며 브라우저 벤더는 사용자가 웹 스토리지를 기본적으로 활성화 또는 비활성화하거나 웹 스토리지 "캐시"를 지울 수 있는 방법을 제공한다.웹 스토리지에 대한 유사한 제어는 타사 브라우저 확장을 통해서도 이용할 수 있다.각 브라우저에서 웹 스토리지 개체를 다르게 저장:

  • Firefox는 웹 스토리지 개체를 SQLite 파일에 저장함webappsstore.sqlite사용자의 프로필 폴더에.
  • 구글 크롬은 웹 저장 데이터를 사용자 프로필의 SQLite 파일에 기록한다.이 파일을 포함하는 하위 폴더는 "\AppData\Local\Google\Chrome\User Data\Default\Local StorageWindows에서 " 및 "~/Library/Application Support/Google/Chrome/Default/Local Storage"는 MacOS에서.
  • Opera의 웹 저장소는 다음 중 하나에 위치한다.\AppData\Roaming\Opera\Opera\sessions\autosave.win" 또는 "\AppData\Local\Opera\Opera\pstorage\"오페라의 버전에 따라서.
  • Internet Explorer의 웹 저장소는 "\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage".

참고 항목

참조

  1. ^ a b Dixit, Shwetank (2013-03-05). "Web Storage: Easier, More Powerful Client-Side Data Storage". Dev.Opera. Retrieved 2021-05-14.
  2. ^ Hume, Andy (2011-03-24). "localStorage is not cookies". andyhume.net. Archived from the original on 2011-06-02. Retrieved 2021-05-14.
  3. ^ Hickson, Ian, ed. (2021-01-28). "Web Storage (Second Edition)". W3C. Web Platform Working Group. Retrieved 2021-05-14.
  4. ^ WHATWG. "HTML Standard § 12 Web storage". html.spec.whatwg.org. Retrieved 2021-05-14.
  5. ^ a b Kitamura, Eiji (2014-01-28). "Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks". Archived from the original on 2014-02-01. Retrieved 2021-05-04.
  6. ^ John Resig: DOM 스토리지.존 레식, ejohn.org.2011-06-12년에 검색됨
  7. ^ michaeln (2013-03-08). "Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review". Chromium Code Reviews. Retrieved 2021-05-14.
  8. ^ Microsoft (2016-10-20). "Introduction to Web Storage". Microsoft Docs. Microsoft. Retrieved 2021-05-14.
  9. ^ W3C: Web Storage 초안 표준.Dev.w3.org (2004-02-05)2011-06-12년에 검색됨
  10. ^ W3C: 인덱싱된 데이터베이스 API. W3C.2012-02-12년에 검색됨
  11. ^ W3C, 2011년 http://dev.w3.org/html5/webstorage/
  12. ^ "DOM Storage". Mozilla Developer Network. Archived from the original on June 4, 2011. Retrieved 2011-06-12.
  13. ^ "Web Storage API". Mozilla Developer Network. Retrieved June 28, 2017.
  14. ^ "Introduction to DOM Storage". Microsoft Developer Network. Archived from the original on June 8, 2011. Retrieved 2011-06-12.
  15. ^ "Introduction to Web Storage". Microsoft Developer Network. Retrieved June 28, 2017.
  16. ^ W3C: Web Storage 초안 표준.Dev.w3.org (2004-02-05)2011-06-12년에 검색됨

외부 링크