initial commit

2 files changed, 346 insertions, 0 deletions

diff --git a/files/ja/web/api/web_storage_api/index.html b/files/ja/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..3317246596
--- /dev/null
+++ b/files/ja/web/api/web_storage_api/index.html
@@ -0,0 +1,118 @@
+---
+title: Web Storage API
+slug: Web/API/Web_Storage_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Web Storage
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p><span class="seoSummary"><strong>Web Storage API</strong> は、{{Glossary("Cookie","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。</span></p>
+
+<h2 id="Web_Storage_concepts_and_usage" name="Web_Storage_concepts_and_usage">Web Storage の概念と使用方法</h2>
+
+<p>Web Storage には、以下の 2 種類の仕組みがあります:</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>ストレージ制限は3つの中で最大です。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、サポートするブラウザーは <code>Window</code> オブジェクトが <code>WindowLocalStorage</code> および <code>WindowSessionStorage</code> オブジェクトを実装しており、これらに <code>localStorage</code> および <code>sessionStorage</code> プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して <code>sessionStorage</code> と <code>localStorage</code> は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。</p>
+
+<div class="note">
+<p><strong>注記</strong>: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。</p>
+</div>
+
+<div class="note">
+<p><strong>注記</strong>: ユーザーが<a href="https://support.mozilla.org/kb/disable-third-party-cookies">サードパーティのクッキーを禁止している</a>（英語）場合は、サードパーティの iframe から Web Storage にアクセスできません (<a href="/ja/docs/Mozilla/Firefox/Releases/43">Firefox 43</a> から、この動作を実装しています)。</p>
+</div>
+
+<div class="note">
+<p><strong>注記:</strong> Web Storage は、<a href="/ja/docs/Storage" title="Storage">mozStorage</a> (SQLite 用の、Mozilla の XPCOM インターフェイス) や <a href="/ja/docs/Session_store_API" title="Session_store_API">Session store API</a> (拡張機能で使用するための、<a href="/ja/docs/XPCOM" title="XPCOM">XPCOM</a> ストレージユーティリティ) とは異なります。</p>
+</div>
+
+<h2 id="Web_Storage_interfaces" name="Web_Storage_interfaces">Web Storage インターフェイス</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>Web Storage API は {{domxref("Window")}} オブジェクトを、{{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} という新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および local {{domxref("Storage")}} オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、{{domxref("Window.onstorage")}} イベントハンドラもあります。</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd><code title="event-storage">storage</code> イベントは、保存領域が変更されたときにドキュメントの <code>Window</code> オブジェクトで発生します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</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>また、<a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output ページ</a>も提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</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#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+<div class="hidden">このページの互換性テーブルは構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">このページの互換性テーブルは構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<h2 id="Private_Browsing_Incognito_modes" name="Private_Browsing_Incognito_modes">プライベートブラウジング / シークレットモード</h2>
+
+<p>ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。</p>
+
+<p>ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。</p>
+
+<p>開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、<a href="https://blog.whatwg.org/tag/localstorage">WHATWG のブログ記事</a>（英語）をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API を使用する</a></li>
+ <li><a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
+</ul>
diff --git a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..3a6fcc9d0d
--- /dev/null
+++ b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,228 @@
+---
+title: Web Storage API の使用
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+tags:
+  - API
+  - Guide
+  - Storage
+  - Web Storage API
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<p><span class="seoSummary">Web Storage API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。</span></p>
+
+<p>この記事は、この技術を利用する方法のチュートリアルを提供します。</p>
+
+<h2 id="Basic_concepts" name="Basic_concepts">基本概念</h2>
+
+<p>Storage オブジェクトはシンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です (なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます)。これらの値にアクセスするにはオブジェクトと同様に、または {{domxref("Storage.getItem()")}} と {{domxref("Storage.setItem()")}} メソッドを使用して行います。以下の 3 行はすべて、(同じ) colorSetting という項目を設定します。</p>
+
+<pre class="brush: js notranslate" style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');</pre>
+
+<div class="note">
+<p><strong>注</strong>: Web Storage API (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) の使用が推奨されており、これは単純なオブジェクトをキーバリューストアとして使うという<a href="http://www.2ality.com/2012/01/objects-as-maps.html">落とし穴</a>を防ぐためです。</p>
+</div>
+
+<p>Web Storage には、以下の 2 種類の仕組みがあります。</p>
+
+<ul>
+ <li>セッションストレージ (<strong><code>sessionStorage</code></strong>) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。</li>
+ <li>ローカルストレージ (<strong><code>localStorage</code></strong>) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。</li>
+</ul>
+
+<p>これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、対応しているブラウザーは <code>Window</code> オブジェクトが <code>WindowLocalStorage</code> および <code>WindowSessionStorage</code> オブジェクトを実装しており、これらに <code>localStorage</code> および <code>sessionStorage</code> プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して <code>sessionStorage</code> と <code>localStorage</code> は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。</p>
+
+<p>よって例えば、始めに文書上で <code>localStorage</code> を呼び出すと {{domxref("Storage")}} が返ります。その後に文書上で <code>sessionStorage</code> を呼び出すと、別の {{domxref("Storage")}} オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。</p>
+
+<h2 id="Feature-detecting_localStorage" name="Feature-detecting_localStorage">localStorage の機能検出</h2>
+
+<p>ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。</p>
+
+<h3 id="Testing_for_availability" name="Testing_for_availability">利用可能かどうかのを検証</h3>
+
+<p>ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに<em>対応していても</em>、ページ上のスクリプトでは<em>利用できる状態ではない</em>場合があります。</p>
+
+<p>例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に<em>利用可能</em>です。機能検出時には、これらのシナリオを考慮に入れるべきです。</p>
+
+<p>ローカルストレージに対応済みかつ使用可能であるかどうかを検出する関数を、以下に示します。</p>
+
+<pre class="brush: js notranslate">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 &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage &amp;&amp; storage.length !== 0);
+    }
+}</pre>
+
+<p>また、この関数の使い方は以下のとおりです。</p>
+
+<pre class="brush: js notranslate">if (storageAvailable('localStorage')) {
+  // やったあ! ローカルストレージをちゃんと利用できます
+}
+else {
+  // 残念、ローカルストレージは利用できません
+}</pre>
+
+<p><code>storageAvailable('sessionStorage')</code> を呼び出すと、代わりにセッションストレージを確認できます。</p>
+
+<p><a href="https://gist.github.com/paulirish/5558557">ローカルストレージの機能を検出する方法の略歴</a>をご覧ください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>ウェブストレージの典型的な使用法を示すため、想像力豊かに <strong>Web Storage Demo</strong> と名づけたシンプルな例を作成しました。<a href="https://mdn.github.io/dom-examples/web-storage/">ランディングページ</a> には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります:</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>また、 <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output ページ</a>も提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。</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>メモ</strong>: 上記のリンクから実際のページを参照することができます。また、<a href="https://github.com/mdn/dom-examples/tree/master/web-storage">ソースコードも確認できます</a>。</p>
+</div>
+
+<h3 id="Testing_whether_your_storage_has_been_populated" name="Testing_whether_your_storage_has_been_populated">ストレージが存在しているかを確認する</h3>
+
+<p>始めに <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a> で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>{{domxref("Storage.getItem()")}} メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 <code>bgcolor</code> アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために <code>populateStorage()</code> を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために <code>setStyles()</code> を実行します。</p>
+
+<p><strong>メモ</strong>: {{domxref("Storage.length")}} を使用して、ストレージオブジェクトが空であるかを確認することもできます。</p>
+
+<h3 id="Getting_values_from_storage" name="Getting_values_from_storage">ストレージから値を取得する</h3>
+
+<p>前述のとおり {{domxref("Storage.getItem()")}} を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>この例で、最初の 3 行はローカルストレージから値を取得しています。次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。</p>
+
+<h3 id="Setting_values_in_storage" name="Setting_values_in_storage">ストレージに値を設定する</h3>
+
+<p>{{domxref("Storage.setItem()")}} は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p><code>populateStorage()</code> 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために <code>setStyles()</code> 関数を実行します。</p>
+
+<p>また、それぞれのフォーム要素に <code>onchange</code> ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。</p>
+
+<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h3 id="Responding_to_storage_changes_with_the_StorageEvent" name="Responding_to_storage_changes_with_the_StorageEvent">StorageEvent を使用してストレージの変更に反応する</h3>
+
+<p>{{domxref("StorageEvent")}} は、{{domxref("Storage")}} オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。</p>
+
+<p>イベントページ (<a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a> をご覧ください) には、以下の JavaScript しかありません。</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});</pre>
+
+<p>ここでは <code>window</code> オブジェクトに、現在のオリジンに関連付けられた {{domxref("Storage")}} オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。</p>
+
+<h3 id="Deleting_data_records" name="Deleting_data_records">データレコードの削除</h3>
+
+<p>ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} は引数が 1 つあり、削除したいデータアイテムのキーです。これは、当該ドメインのストレージオブジェクトからデータアイテムを削除します。</li>
+ <li>{{domxref("Storage.clear()")}} は引数がなく、当該ドメインのストレージオブジェクト全体を空にします。</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<h3 id="Window.localStorage" name="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage" name="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<p>すべてのブラウザーで、ローカルストレージおよびセッションストレージが受け入れる容量は異なります。<a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">さまざまなブラウザーのストレージ容量を報告しているページ</a>があります。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API のランディングページ</a></li>
+</ul>