diff options
Diffstat (limited to 'files/ko/web/api/web_storage_api')
| -rw-r--r-- | files/ko/web/api/web_storage_api/index.html | 117 | ||||
| -rw-r--r-- | files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html | 218 |
2 files changed, 335 insertions, 0 deletions
diff --git a/files/ko/web/api/web_storage_api/index.html b/files/ko/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..68af357a42 --- /dev/null +++ b/files/ko/web/api/web_storage_api/index.html @@ -0,0 +1,117 @@ +--- +title: Web Storage API +slug: Web/API/Web_Storage_API +tags: + - API + - Reference + - Storage + - Web Storage + - Web Storage API + - localStorage + - sessionStorage + - 로컬스토리지 + - 세션스토리지 + - 웹 스토리지 +translation_of: Web/API/Web_Storage_API +--- +<div>{{DefaultAPISidebar("Web Storage API")}}</div> + +<p><strong>Web Storage API</strong>는 브라우저에서 키/값 쌍을 {{glossary("cookie", "쿠키")}}보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.</p> + +<h2 id="Web_Storage_개념과_사용법">Web Storage 개념과 사용법</h2> + +<p>Web Storage의 두 가지 방식은 다음과 같습니다.</p> + +<ul> + <li><code>sessionStorage</code>는 각각의 {{glossary("origin", "출처")}}에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다. + + <ul> + <li>세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.</li> + <li>데이터를 절대 서버로 전송하지 않습니다.</li> + <li>저장 공간이 쿠키보다 큽니다. (최대 5MB)</li> + </ul> + </li> + <li><code>localStorage</code>도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다. + <ul> + <li>유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.</li> + <li>저장 공간이 셋 중 제일 큽니다.</li> + </ul> + </li> +</ul> + +<p>위의 방식은 {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성을 통해 사용할 수 있습니다. (보다 정확히 말하자면, 지원하는 브라우저에서는 <code>Window</code> 객체는 <code>localStorage</code> 및 <code>sessionStorage</code> 속성을 포함한 <code>WindowLocalStorage</code>와 <code>WindowSessionStorage</code> 객체를 구현합니다) 두 속성 중 하나에 접근하면 {{domxref("Storage")}} 객체의 인스턴스를 생성하게 되고, 그걸 사용해 데이터 항목을 추가, 회수, 제거할 수 있습니다. <code>sessionStorage</code>와 <code>localStorage</code>의 <code>Storage</code> 객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 기능합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: Firefox 45 이후로는, 과도한 Web Storage 사용으로 인한 메모리 문제를 피하기 위해 브라우저가 충돌하거나 재시작할 때의 출처 당 저장 공간이 10MB로 제한됩니다.</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 사용자가 <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">서드 파티 쿠키를 비활성화</a>한 경우 서드 파티 IFrame에서 Web Storage에 접근할 수 없습니다. Firefox는 43부터 이 동작을 사용합니다.</p> +</div> + +<h2 id="Web_Storage_인터페이스">Web Storage 인터페이스</h2> + +<dl> + <dt>{{domxref("Storage")}}</dt> + <dd>특정 도메인과 저장 유형(세션 또는 로컬)에 대해 데이터를 저장, 회수, 삭제할 수 있습니다.</dd> + <dt>{{domxref("Window")}}</dt> + <dd>Web Storage API는 {{domxref("Window")}} 객체를 확장합니다. {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성을 추가해 현재 도메인의 세션과 로컬 {{domxref("Storage")}} 객체의 접근을 가능케 하고, 새로운 항목을 추가하는 등 저장 공간이 변경될 때 발생하는 {{domxref("Window.onstorage")}} 이벤트 처리기도 추가합니다.</dd> + <dt>{{domxref("StorageEvent")}}</dt> + <dd><code title="event-storage">storage</code> 이벤트는 저장 공간이 변경될 때 <code>Window</code> 객체에서 발생합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>일반적인 Web Storage 사용법을 설명하기 위한 데모를 만들었습니다. 창의적이게도 <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>라는 이름으로, <a href="https://mdn.github.io/dom-examples/web-storage/">랜딩 페이지</a>에서 색, 글꼴, 이미지를 바꿀 수 있습니다. 선택지를 바꾸면 페이지가 실시간으로 변함과 동시에 <code>localStorage</code>에도 현재 상태를 저장하게 되므로, 페이지를 떠났다가 다시 방문해도 선택지가 그대로 보존됩니다.</p> + +<p>추가로 이벤트 출력 페이지도 제공 중입니다. 이 페이지를 다른 탭에 열고 랜딩 페이지에서 선택지를 바꾸면 {{domxref("StorageEvent")}}를 통해 업데이트된 저장 정보를 출력하는 것을 볼 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="Window.localStorage"><code>Window.localStorage</code></h3> + +<div> + + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Window.sessionStorage")}}</p> +</div> +</div> + +<h2 id="사생활_보호_시크릿_모드">사생활 보호 / 시크릿 모드</h2> + +<p>대부분의 최신 브라우저는 탐색 기록과 쿠키를 남기지 않는 "사생활 보호 모드", "시크릿 모드", 또는 비슷한 이름의 기능을 가지고 있습니다. 그리고 정말 분명한 이유로 인해 Web Storage와 호환되지 않습니다. 브라우저 공급자들은 다양한 시나리오에서 이를 해결하기 위해 실험을 진행하고 있습니다.</p> + +<p>대부분의 브라우저는 Web Storage API에 접근 가능하며 기능하는 것 처럼 보이지만, 큰 차이점으로서, 브라우저를 닫으면 저장한 데이터를 제거하는 전략을 택하고 있습니다. 이런 브라우저 사이에서도, 일반 브라우징 세션에서 저장한 기존 데이터의 처리법에 대해서는 이견이 존재합니다. 사생활 보호 모드에서도 저 데이터에 접근할 수 있어야 할까요? 그런 반면, 마찬가지로 Web Storage API는 존재하지만 최대 용량을 0바이트 할당하여 어떠한 데이터도 입력할 수 없도록 하는 일부 브라우저도 존재하며, 대표적으로 Safari가 있습니다.</p> + +<p>Web Storage API에 의존하는 웹 사이트를 개발할 때, 개발자는 이러한 구현 차이에 대해 고려해야 합니다. 더 많은 정보는 이 주제를 다루는 <a href="https://blog.whatwg.org/tag/localstorage">WHATWG 블로그 글</a>을 참고하세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li> + <li><a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">브라우저 저장 공간 제한과 정리 기준</a></li> +</ul> diff --git a/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..25ad6cfa5f --- /dev/null +++ b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,218 @@ +--- +title: Web Storage API 사용하기 +slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +<div>{{DefaultAPISidebar("Web Storage API")}}</div> + +<p>Web Storage API는 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공합니다.</p> + +<p>이 글은 본 기술을 어떻게 사용하는지 설명합니다.</p> + +<h2 id="기본_컨셉">기본 컨셉</h2> + +<p>Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷합니다. 하지만 이 데이터들은 페이지 로딩에도 온전하게 유지됩니다. key와 그 value는 항상 문자열입니다. (만약 정수로 키를 사용할 경우 이는 자동으로 string으로 변경됩니다, 자바스크립트 객체의 동작방식을 생각해보세요) 객체를 사용하듯이 쉽게 값에 접근할 수 있으며, 이 때 {{domxref("Storage.getItem()")}}과 {{domxref("Storage.setItem()")}} 메서드를 사용할 수 있습니다. 아래 세 줄은 (동일한) colorSetting 엔트리에 값을 설정하는 방법입니다.</p> + +<pre style="white-space: pre;">localStorage.colorSetting = '#a4509b'; +localStorage['colorSetting'] = '#a4509b'; +localStorage.setItem('colorSetting', '#a4509b'); +</pre> + +<div class="note"> +<p><strong>노트</strong>: 일반 객체를 key-value 저장소로 사용할 때 <a href="http://www.2ality.com/2012/01/objects-as-maps.html">pitfalls</a>과 관련된 사항을 막기 위해 Web Storage API(<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>)를 사용하는 걸 권장합니다.</p> +</div> + +<p>Web Storage는 두 메커니즘을 가지고 있습니다.</p> + +<ul> + <li><strong><code>sessionStorage</code></strong>는 페이지의 세션이 유지되는 동안 사용할 수 있는 각 origin별로 별도의 스토리지를 관리합니다. (페이지 리로딩 및 복원을 포함한, 브라우저가 열려있는 한 최대한 긴 시간 동안)</li> + <li><strong><code>localStorage</code></strong>도 같은 일을 하지만, 브라우저가 닫히거나 다시 열리더라도 유지합니다.</li> +</ul> + +<p>이 메커니즘들은 {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성(좀 더 정확히 말하자면, 지원하는 브라우저에서 <code>Window</code> 객체는 <code>localStorage</code> 및 <code>sessionStorage</code> 속성 사용이 중단되는 <code>WindowLocalStorage</code>과 <code>WindowSessionStorage</code>로 구현됩니다)으로 사용 가능합니다. 이 중 하나를 호출하면 데이터를 설정, 검색 및 제거할 수 있는 {{domxref("Storage")}} 객체의 인스턴스가 생성됩니다. 각 Storage 객체는 각 origin 별 <code>sessionStorage</code> 나 <code>localStorage</code>로 사용됩니다. 동작도 제각기 동작합니다.</p> + +<p>예를 들면, 문서에서 <code>localStorage</code>를 호출하면 {{domxref("Storage")}} 객체를 반환합니다. 문서에서 <code>sessionStorage</code>를 호출하면 다른 {{domxref("Storage")}} 객체를 반환합니다. 둘 다 같은 방법으로 조작할 수 있지만, 서로 다릅니다.</p> + +<h2 id="localStorage_기능_지원_감지">localStorage 기능 지원 감지</h2> + +<p>localStorage를 사용하려면 먼저 현재 브라우징 세션에서 지원되고 사용 가능한지 확인해야합니다.</p> + +<h3 id="사용_가능_검사">사용 가능 검사</h3> + +<p>localStorage를 지원하는 브라우저는 windows 객체에 localStorage라는 property가 존재 합니다. 그러나 여러 가지 이유로 인해 예외가 발생할 수 있습니다. 존재한다 해도 다양한 브라우저가 localStorage를 비활성화하는 설정을 제공하기 때문에 localStorage가 실제로 사용 가능하다는 보장은 없습니다. 따라서 브라우저가 localStorage를 지원한다고 해도 스크립트에서 사용 하지 못 할 수도 있습니다. 예를 들어 사파리 브라우저의 사생활 보호 모드에서 할당량이 0 인 빈 localStorage 개체를 제공하므로 효과적으로 사용할 수 없게 만듭니다. 이때 QuotaExceededError를 얻을 수도 있습니다. 이는 사용가능한 저장공간을 모두 소모 했다는 의미로, localStorage를 사용할 수 없음을 뜻합니다. 이러한 시나리오를 고려하여 사용가능 여부를 검사하여야 합니다.</p> + +<p>다음은 localStorage가 지원되고 사용 가능한지 여부를 감지하는 함수입니다.</p> + +<pre><code>function storageAvailable(type) { + var storage; + try { + storage = window[type]; + var x = '__storage_test__'; + storage.setItem(x, x); + storage.removeItem(x); + return true; + } + catch(e) { + return e instanceof DOMException && ( + // Firefox를 제외한 모든 브라우저 + e.code === 22 || + // Firefox + e.code === 1014 ||</code> +<code> // 코드가 존재하지 않을 수도 있기 떄문에 이름 필드도 확인합니다. + // Firefox를 제외한 모든 브라우저 + e.name === 'QuotaExceededError' || + // Firefox + e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && + // </code>이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.<code> + (storage && storage.length !== 0); + } +}</code></pre> + +<p>위 함수를 다음과 같이 사용할 수 있습니다.</p> + +<pre><code>if (storageAvailable('localStorage')) { + // 야호! 우리는 localStorage를 사용할 수 있습니다. +} +else { + // 슬픈 소식, localStorage를 사용할 수 없습니다. +}</code></pre> + +<p><code>storageAvailable('sessionStorage')</code>를 호출하여 sessionStorage 사용 가능 여부도 확인할 수 있습니다.</p> + +<p>여기서 <a href="https://gist.github.com/paulirish/5558557">로컬 스토리지 기능이 존재하는지 확인하는 방법에 대한 기록</a>을 볼 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>To illustrate some typical web storage usage, we have created a simple example, imaginatively called <strong>Web Storage Demo</strong>. The <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> provides controls that can be used to customize the color, font, and decorative image:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">다른 색상을 선택하면, 페이지에 바로 적용됩니다. 또한 선택한 값을 <code>localStorage</code>에 저장했다면, 페이지를 나갔다가 나중에 다시 들어왔을 떄 이전에 저장한 값을 기억하고 있습니다.</p> + +<p>We have also provided an <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>Note</strong>: As well as viewing the example pages live using the above links, you can also <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">check out the source code</a>.</p> +</div> + +<h3 id="Testing_whether_your_storage_has_been_populated">Testing whether your storage has been populated</h3> + +<p>To start with on <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, we will test whether the storage object has already been populated (i.e., the page was previously accessed):</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="operator token">!</span>localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">populateStorage</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the <code>bgcolor</code> item exists; if not, we run <code>populateStorage()</code> to add the existing customization values to the storage. If there are already values there, we run <code>setStyles()</code> to update the page styling with the stored values.</p> + +<p><strong>Note</strong>: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.</p> + +<h3 id="Getting_values_from_storage">Getting values from storage</h3> + +<p>As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> currentColor <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> currentFont <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> currentImage <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentColor<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentFont<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentImage<span class="punctuation token">;</span> + + htmlElem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'#'</span> <span class="operator token">+</span> currentColor<span class="punctuation token">;</span> + pElem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontFamily <span class="operator token">=</span> currentFont<span class="punctuation token">;</span> + imgElem<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> currentImage<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p> + +<h3 id="Setting_values_in_storage">Setting values in storage</h3> + +<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">populateStorage</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> + localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> + localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p> + +<p>We've also included an <code>onchange</code> handler on each form element so that the data and styling are updated whenever a form value is changed:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">bgcolorForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span> +fontForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span> +imageForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span></code></pre> + +<h3 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h3> + +<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p> + +<p>On the events page (see <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) the only JavaScript is as follows:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'storage'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-key'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>key<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-old'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>oldValue<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-new'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>newValue<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-url'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>url<span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-storage'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>storageArea<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself (which we've stringified so you can see its content).</p> + +<h3 id="데이터_제거하기">데이터 제거하기</h3> + +<p>웹 스토리지에서는 데이터를 삭제하기 위한 두 가지 간단한 메소드를 제공합니다. 데모에서 사용하지는 않았지만, 간단하게 프로젝트에 추가할 수 있습니다:</p> + +<ul> + <li>{{domxref("Storage.removeItem()")}}는 — 삭제하고 싶은 데이터의 키 — 한 개의 인자를 받습니다. 그리고 해당 도메인의 저장소 객체에서 데이터를 제거합니다.</li> + <li>{{domxref("Storage.clear()")}}는 아무 인자도 받지 않습니다. 그리고 해당 도메인의 저장소 객체 전체를 비워버립니다.</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Window.localStorage"><code>Window.localStorage</code></h3> + +<div> + + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Window.sessionStorage")}}</p> +</div> +</div> + +<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li> +</ul> |