blob: 249dd1ad1242cd7649a40c955453d632e777c608 (
plain)
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: Storage.getItem()
slug: Web/API/Storage/getItem
tags:
- API
- Method
- Reference
- Storage
- Web Storage
translation_of: Web/API/Storage/getItem
---
<p>{{APIRef("Web Storage API")}}</p>
<p>{{domxref("Storage")}} インターフェイスの <code>getItem()</code> メソッドはキーの名称を渡すと、そのキーに対する値を返します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><em><code>keyName</code></em></dt>
<dd>値を取り出したいキーの名称を持つ {{domxref("DOMString")}}。</dd>
</dl>
<h3 id="Returns" name="Returns">戻り値</h3>
<p>キーに対する値を持つ {{domxref("DOMString")}}。キーが存在しない場合は <code>null</code> が返ります。</p>
<h2 id="Example" name="Example">例</h2>
<p>以下の関数はローカルストレージから 3 個のデータアイテムを取り出して、その値を使用してページのカスタムスタイルを設定します。</p>
<pre class="brush: js">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>
<div class="note">
<p><strong>注記</strong>: 実際の例として、<a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a> をご覧ください。</p>
</div>
<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('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>localStorage</td>
<td>4</td>
<td>3.5</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
<tr>
<td>sessionStorage</td>
<td>5</td>
<td>2</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本サポート</td>
<td>2.1</td>
<td>{{CompatUnknown}}</td>
<td>8</td>
<td>11</td>
<td>iOS 3.2</td>
</tr>
</tbody>
</table>
</div>
<p>すべてのブラウザで、localStorage および sessionStorage が受け入れる容量は異なります。<a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">さまざまなブラウザのストレージ容量を報告しているページ</a>があります。</p>
<div class="note">
<p><strong>注記</strong>: iOS 5.1 より Safari Mobile は localStorage データを cache フォルダに保存しており、概して空き容量が少ない場合に OS の要求により、時々クリーンアップを受けます。</p>
</div>
ｓ
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Storage/setItem">Storage.setItem()</a></li>
<li><a href="/ja/docs/Web/API/Storage/removeItem">Storage.removeItem()</a></li>
<li><a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API を使用する</a></li>
</ul>
|
