1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: Window.sessionStorage
slug: Web/API/Window/sessionStorage
tags:
- API
- Property
- Reference
- Storage
- Window
- WindowSessionStorage
- 세션스토리지
translation_of: Web/API/Window/sessionStorage
---
<div>{{APIRef("Web Storage API")}}</div>
<p><strong><code>sessionStorage</code></strong> 읽기 전용 속성은 현재 {{glossary("origin", "출처")}} 세션의 {{domxref("Storage")}} 객체에 접근합니다. <code>sessionStorage</code>는 {{domxref("Window.localStorage", "localStorage")}}와 비슷하지만, <code>localStorage</code>의 데이터는 만료되지 않고, <code>sessionStorage</code>의 데이터는 <u>페이지 세션</u>이 끝날 때 제거되는 차이가 있습니다.</p>
<ul>
<li>페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.</li>
<li><strong>페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.</strong></li>
<li>같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 <code>sessionStorage</code>를 생성합니다.</li>
<li>탭/창을 닫으면 세션이 끝나고 <code>sessionStorage</code> 안의 객체를 초기화합니다.</li>
</ul>
<p><code>sessionStorage</code>에 저장한 자료는 <strong>페이지 프로토콜별로 구분</strong>합니다. 특히 HTTP(<a href="http://example.com">http://example.com</a>)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(<a href="https://example.com">https://example.com</a>)와는 다른 <code>sessionStorage</code>에 저장됩니다.</p>
<p>키와 값은 <u>항상</u> 각 문자에 2바이트를 할당하는 UTF-16 {{domxref("DOMString")}}의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.</p>
<h2 id="구문">구문</h2>
<pre class="syntaxbox notranslate"><em>myStorage</em> = <em>window</em>.sessionStorage;</pre>
<h3 id="값">값</h3>
<p>현재 {{glossary("origin", "출처")}}의 세션 저장 공간에 접근할 수 있는 {{domxref("Storage")}} 객체.</p>
<h3 id="예외">예외</h3>
<dl>
<dt><code>SecurityError</code></dt>
<dd>요청이 정책의 결정을 위반했거나, 출처가 <a href="/ko/docs/Web/Security/Same-origin_policy#출처의_정의">유효한 스킴/호스트/포트 튜플</a>이 아닌 경우. 유효하지 않은 튜플은 출처가 <code>file:</code>이나 <code>data:</code> 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<p>아래 코드는 현재 출처의 세션 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.</p>
<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
<p>다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.</p>
<pre class="brush: js notranslate">// 추적할 텍스트 입력 칸 가져오기
let field = document.getElementById("field");
// 자동저장 값이 존재하는지 판별
// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
if (sessionStorage.getItem("autosave")) {
// 입력 칸의 콘텐츠 복구
field.value = sessionStorage.getItem("autosave");
}
// 텍스트 입력 칸의 변화 수신
field.addEventListener("change", function() {
// 결과를 세션에 저장
sessionStorage.setItem("autosave", field.value);
});
</pre>
<div class="blockIndicator note">
<p><strong>참고:</strong> <a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a> 문서에서 전체 예제를 살펴보세요.</p>
</div>
<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#dom-sessionstorage", "sessionStorage")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.Window.sessionStorage")}}</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>{{domxref("Window.localStorage")}}</li>
</ul>
|
