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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: Almacenamiento
slug: Web/API/Storage
tags:
- API
- Almacenamiento
- Almacenamiento web
- Interface
- Reference
- TopicStub
- data
translation_of: Web/API/Storage
---
<p>{{APIRef("Web Storage API")}}</p>
<p>La interfaz <code>Storage</code> de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.</p>
<p>Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método {{domxref("Window.sessionStorage")}}; Si deseas manipular el almacenamiento local para un dominio, debes llamar a {{domxref("Window.localStorage")}}.</p>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
<dd>Retorna un entero que representa el número de elementos almacenados en el objeto<code> Storage</code>.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Storage.key()")}}</dt>
<dd>Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.</dd>
</dl>
<dl>
<dt>{{domxref("Storage.getItem()")}}</dt>
<dd>Cuando se le pasa un nombre de clave, retorna el valor de esa clave.</dd>
<dt>{{domxref("Storage.setItem()")}}</dt>
<dd>Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.</dd>
<dt>{{domxref("Storage.removeItem()")}}</dt>
<dd>Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.</dd>
<dt>{{domxref("Storage.clear()")}}</dt>
<dd>Cuando es invocado vacía todas las claves del almacenamiento.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Aquí tenemos un objeto <code>Storage</code> al llamar a <code>localStorage</code>. Primero probamos si el almacenamiento local contiene elementos de dato usando <code>!localStorage.getItem('bgcolor')</code>. Si lo hace, ejecutamos una función llamada <code>setStyles()</code> que obtiene los elementos usando {{domxref("localStorage.getItem()")}} y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, <code>populateStorage()</code>, que utiliza {{domxref("localStorage.setItem()")}} para definir los valores de los elementos, luego ejecuta <code>setStyles()</code>.</p>
<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
localStorage.setItem('font', document.getElementById('font').value);
localStorage.setItem('image', document.getElementById('image').value);
setStyles();
}
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>Nota</strong>: Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra <a href="https://github.com/mdn/web-storage-demo">Demo de almacenamiento web</a>.</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-storage-interface', 'Storage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de 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>Basic support</td>
<td>2.1</td>
<td>{{ CompatUnknown }}</td>
<td>8</td>
<td>11</td>
<td>3.2[1]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] A partir de iOS 5.1, Safari Mobile almacena los datos de <code>localStorage</code> en la carpeta cache, que es sujeta a ser vaciada ocasionalmente a petición del SO, típicamente si hay poco espacio disponible.</p>
<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage y sessionStorage. Aquí hay un <a href="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento para diferentes navegadores</a>.</p>
<h2 id="Ver_también">Ver también</h2>
<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usar la API de almacenamiento Web</a></p>
|
