initial commit

1 files changed, 94 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/window/sessionstorage/index.html b/files/zh-tw/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..696367e872
--- /dev/null
+++ b/files/zh-tw/web/api/window/sessionstorage/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+  - Property
+  - Storage
+  - WindowSessionStorage
+  - localStorage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p><code>sessionStorage</code> 屬性能讓開發人員訪問當前 origin 的 {{DOMxRef("Storage")}} 物件。<code>sessionStorage</code> 跟 {{DOMxRef("Window.localStorage", "localStorage")}} 很相似：唯一不同的地方是存放在 <code>localStorage</code> 的資料並沒有過期的時效；而存放在 <code>sessionStorage</code> 的資料則會在頁面 session 結束時清空。只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。<strong>開啟新頁籤或視窗會產生一個新的sessionStorage</strong>，跟Session與Cookies的做法不大一樣。
+
+</p>
+
+<p>另應該注意：不論資料放在 <code>sessionStorage</code> 還是 <code>localStorage</code>，都被<strong>限制在該網站的規範內，其他網站無法存取</strong>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">// 將資料存到sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// 從sessionStorage取得之前存的資料
+var data = sessionStorage.getItem('key');
+
+// 從sessionStorage移除之前存的資料
+sessionStorage.removeItem('key');
+
+// 從sessionStorage移除之前存的所有資料
+sessionStorage.clear();
+</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{DOMxRef("Storage")}} 物件.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面簡短的程式碼，訪問了當前域名下的 session {{DOMxRef("Storage")}} 物件，並使用 {{DOMxRef("Storage.setItem()")}} 添加了資料單元。</p>
+
+<pre class="brush: js;">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>以下提供的範例為將文字輸入元件的內容自動保存，如果瀏覽器不小心重新整理，在頁面恢復後，會自動將內容還原，不會造成尚未送出的資料被清空。</p>
+
+<pre class="brush: js">// 取得我們要保留內容的text field元件
+var field = document.getElementById("field");
+
+// 檢查是否有之前的<strong>autosave</strong>的內容
+// 這段程式碼會在瀏覽器進入該頁面時被執行
+if (sessionStorage.getItem("autosave")) {
+  // 還原先前的內容到指定的text field
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// 註冊事件監聽text field內容的變化
+field.addEventListener("change", function() {
+  // 並儲存變化後的內容至sessionStorage的物件裡
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<div class="note">
+<p><strong>備註</strong>: 完整的範例可參考這篇文章: <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>。</p>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</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="/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>