웹 스토리지

3. 사용법

웹 스토리지를 지원하는 브라우저는 window 레벨에서 `sessionStorage`와 `localStorage`라는 전역 객체를 선언한다. 다음 JavaScript 코드는 이러한 브라우저에서 웹 스토리지 동작을 트리거하는 데 사용할 수 있다.

```javascript

// 세션 기간 동안 브라우저에 값 저장

sessionStorage.setItem('key', 'value');

// 값 검색 (브라우저를 닫았다가 다시 열면 삭제됨)

alert(sessionStorage.getItem('key'));

// 세션 기간을 넘어 브라우저에 값 저장

localStorage.setItem('key', 'value');

// 값 검색 (브라우저를 닫았다가 다시 열어도 유지됨)

alert(localStorage.getItem('key'));

```

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

```javascript

// 문자열 대신 객체 저장

localStorage.setItem('key', {name: 'value'});

alert(typeof localStorage.getItem('key')); // string

// 문자열 대신 정수 저장

localStorage.setItem('key', 1);

alert(typeof localStorage.getItem('key')); // string

// JSON을 사용하여 객체 저장

localStorage.setItem('key', JSON.stringify({name: 'value'}));

alert(JSON.parse(localStorage.getItem('key')).name); // value

4. 웹 스토리지 관리

웹 스토리지 객체의 저장은 현재 지원되는 모든 웹 브라우저에서 기본적으로 활성화되어 있으며, 브라우저 벤더마다 사용자가 웹 스토리지를 활성화 또는 비활성화하는 방법, 그리고 웹 스토리지의 "캐시"를 지우는 방법을 제공한다.<sup>[16][35]</sup> 마찬가지로 웹 스토리지를 제어하는 방법은 서드 파티의 브라우저 확장 기능을 통해서도 가능하다. 브라우저별로 웹 스토리지 객체를 저장하는 방법은 다음과 같다.

5. 명칭

W3C 초안의 제목은 "웹 스토리지"이다. "DOM 스토리지"도 일반적으로 사용되는 명칭이었으나, 현재는 그 사용 빈도가 줄어들고 있다. 예를 들어, Mozilla 및 Microsoft 개발자 사이트의 "DOM 스토리지" 웹 문서는 "웹 스토리지" 문서로 대체되었다.<sup>[11][12][13][14]</sup>

DOM 스토리지를 구성하는 "DOM"은 문자 그대로 문서 객체 모델을 의미하지 않는다. W3C에 따르면, "DOM이라는 용어는 웹 애플리케이션에서 스크립트에 제공되는 API 집합을 지칭하며, 실제 Document 객체의 존재를 반드시 의미하는 것은 아니다..."<sup>[15]</sup>

6. 비슷한 기술

• Indexed Database API
• 웹 SQL 데이터베이스
• HTTP 쿠키
• Origin private file system (OPFS)

참조

<sub>[1]</sub> 웹사이트 localStorage is not cookies https://web.archive.[...] 2021-05-14
<sub>[2]</sub> 웹사이트 Web Storage (Second Edition) http://www.w3.org/TR[...] Web Platform Working Group 2021-05-14
<sub>[3]</sub> 웹사이트 HTML Standard § 12 Web storage https://html.spec.wh[...] 2021-05-14
<sub>[4]</sub> 웹사이트 Web Storage: Easier, More Powerful Client-Side Data Storage https://dev.opera.co[...] 2021-05-14
<sub>[5]</sub> 웹사이트 Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks https://web.archive.[...] 2021-05-04
<sub>[6]</sub> 문서 John Resig: DOM Storage http://ejohn.org/blo[...] ejohn.org 2011-06-12
<sub>[7]</sub> 웹사이트 Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review https://chromiumcode[...] 2021-05-14
<sub>[8]</sub> 웹사이트 Introduction to Web Storage https://docs.microso[...] Microsoft 2021-05-14
<sub>[9]</sub> 문서 W3C: Web Storage draft standard http://dev.w3.org/ht[...] Dev.w3.org 2011-06-12
<sub>[10]</sub> 문서 http://dev.w3.org/ht[...] W3C 2011
<sub>[11]</sub> 웹사이트 DOM Storage https://web.archive.[...] 2011-06-12
<sub>[12]</sub> 웹사이트 Web Storage API https://developer.mo[...] 2017-06-28
<sub>[13]</sub> 웹사이트 Introduction to DOM Storage https://web.archive.[...] 2011-06-12
<sub>[14]</sub> 웹사이트 Introduction to Web Storage https://msdn.microso[...] 2017-06-28
<sub>[15]</sub> 문서 W3C: Web Storage draft standard http://dev.w3.org/ht[...] Dev.w3.org 2011-06-12
<sub>[16]</sub> 문서 How to enable, disable, or clear your browser's "Web Storage" cache https://mid.as/kb/00[...] mid.as 2022-10-06
<sub>[17]</sub> 문서 Webappsstore.sqlite https://kb.mozillazi[...] kb.mozillazine.org
<sub>[18]</sub> 문서 Where is Safari web data stored? https://discussions.[...] discussions.apple.com 2022-10-20
<sub>[19]</sub> 웹사이트 localStorage in Modern Applications https://rxdb.info/ar[...] 2023-08-14
<sub>[20]</sub> 문서 Opera Web Storage http://dev.opera.com[...] Opera 2011
<sub>[21]</sub> 문서 AndyHume.net http://blog.andyhume[...] AndyHume.net 2011
<sub>[22]</sub> 문서 Web Storage https://www.w3.org/T[...] W3.org 2011-06-12
<sub>[23]</sub> 문서 HTML Living Standard 11 Web storage https://html.spec.wh[...]
<sub>[24]</sub> 문서 John Resig: DOM Storage http://ejohn.org/blo[...] ejohn.org 2011-06-12
<sub>[25]</sub> 웹사이트 Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review https://chromiumcode[...] 2020-01-13
<sub>[26]</sub> 문서 Introduction to Web Storage http://msdn.microsof[...] Microsoft Developer Network, msdn.microsoft.com 2014-08-05
<sub>[27]</sub> 문서 W3C: HTML Living Standard https://html.spec.wh[...] W3C 2020-01-13
<sub>[28]</sub> 문서 W3C: Indexed Database API https://www.w3.org/T[...] W3C 2012-02-12
<sub>[29]</sub> 문서 http://dev.w3.org/ht[...] W3C 2011
<sub>[30]</sub> 웹사이트 DOM Storage https://web.archive.[...] 2011-06-12
<sub>[31]</sub> 웹사이트 Web Storage API https://developer.mo[...] 2017-06-28
<sub>[32]</sub> 웹사이트 Introduction to DOM Storage https://web.archive.[...] 2011-06-12
<sub>[33]</sub> 웹사이트 Introduction to Web Storage https://msdn.microso[...] 2017-06-28
<sub>[34]</sub> 문서 W3C: Web Storage draft standard http://dev.w3.org/ht[...] Dev.w3.org 2011-06-12
<sub>[35]</sub> 웹사이트 How to enable, disable, or clear your browser's "Web Storage" cache - MIDAS Knowledgebase https://mid.as/kb/ar[...] 2020-01-13
<sub>[36]</sub> 웹사이트 html5 - Where does Firefox store javascript/HTML localStorage? https://stackoverflo[...] 2020-01-13
<sub>[37]</sub> 웹사이트 html - How is HTML5 WebStorage data physically stored? https://stackoverflo[...] 2019-07-16
<sub>[38]</sub> 웹사이트 local storage - Where the sessionStorage and localStorage stored? https://stackoverflo[...] 2020-01-13