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
142
143
|
---
title: Window.sessionStorage
slug: Web/API/Window/sessionStorage
tags:
- Almacenaje
- Propiedad
- Referencia
- Sesion
translation_of: Web/API/Window/sessionStorage
---
<p>{{APIRef()}}</p>
<p>La propiedad <code>sessionStorage</code> permite acceder a un objeto {{domxref("Storage")}} asociado a la sesión actual. La propiedad sessionStorage es similar a <a href="/en-US/docs/Web/API/Window.localStorage"><code>localStorage</code></a>, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. <strong>Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión</strong>, lo que difiere en la forma en que trabajan las cookies de sesión<strong>.</strong></p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: js">// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage.getItem('key');</pre>
<h3 id="Valor">Valor </h3>
<p>Un objeto de tipo {{domxref("Storage")}}.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<p>El siguiente código accede al objeto {{domxref("Storage")}} del la sesión actual del domino y le añade un elemento utilizando {{domxref("Storage.setItem()")}}.</p>
<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
<p>El siguiente ejemplo graba de forma automática el contenido de un campo de texto, y si el navegador es actualizado accidentalmente, restaura el contenido del campo de texto para no perder lo escrito.</p>
<pre class="brush: js">// Obtiene el campo de texto que vamos a moniterear
var field = document.getElementById("field");
// Verificamos si tenemos algún valor auto guardado
// (esto solo ocurrirá si la página es recargada accidentalmente)
if (sessionStorage.getItem("autosave")) {
// Restaura el contenido al campo de texto
field.value = sessionStorage.getItem("autosave");
}
// Espera por cambios en el campo de texto
field.addEventListener("change", function() {
// Almacena el resultado en el objeto de almacenamiento de sesión
sessionStorage.setItem("autosave", field.value);
});</pre>
<p> </p>
<div class="note">
<p><strong>Nota</strong>: Por favor diríjase al artículo <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de Web Storage</a> para un ejemplo completo.</p>
</div>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</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>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>2.1</td>
<td>{{ CompatUnknown }}</td>
<td>8</td>
<td>11</td>
<td>iOS 3.2</td>
</tr>
</tbody>
</table>
</div>
<p>Todos los navegadores tienen distintos niveles de capacidad para localStorage y para sessionStorage. Aquí encontraras un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/">resumen detallado de todas las capacidades de almacenamiento para diversos navegadores</a>.</p>
<div class="note">
<p><strong>Nota: </strong>desde iOS 5.1, Safari Mobile almacena los datos de localStorage en un directorio de cache, el cual esta sujeto a limpezas ocacionales, por orden del sistema operativo, generalmente si el espacio es reducido.</p>
</div>
<h2 id="Vea_También">Vea También</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de Web Storage</a></li>
<li><a href="/en-US/docs/Web/API/Window.localStorage">Window.localStorage</a></li>
</ul>
|
