initial commit

2 files changed, 406 insertions, 0 deletions

diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api_pt_br/index.html
new file mode 100644
index 0000000000..f4e16bd9e7
--- /dev/null
+++ b/files/pt-br/web/api/web_storage_api_pt_br/index.html
@@ -0,0 +1,139 @@
+---
+title: API de Armazenamento na Web
+slug: Web/API/Web_Storage_API_pt_br
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>A  API de armazenamento na web (<strong>Web Storage</strong>) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.</p>
+
+<h2 id="Armazenamento_na_Web_conceitos_e_formas_de_uso">Armazenamento na Web conceitos e formas de uso</h2>
+
+<p>A API de Web Storage fornece duas maneiras de armazenar dados:</p>
+
+<ul>
+ <li><code>sessionStorage</code> mantém as informações armazenadas por origem e permanece disponível enquanto há uma sessão aberta no navegador (mesmo a página sendo recarregada). Caso o browser seja fechado a sessão será limpa e as informações serão perdidas.</li>
+ <li><code>localStorage</code> mesmo que o navegador seja fechado, os dados permanecem armazenados.</li>
+</ul>
+
+<p>Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto <code>Window</code> implementa os objetos  <code>Window.LocalStorage</code> e <code>Window.SessionStorage</code>) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de <code>sessionStorage</code> e <code>localStorage, dessa forma o controle de ambos é realizado de forma separada.</code></p>
+
+<div class="note">
+<p>Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).</p>
+</div>
+
+<div class="note">
+<p>Nota<strong>:</strong> Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).</p>
+</div>
+
+<h2 id="Interfaces_de_Armazenamento_na_Web">Interfaces de Armazenamento na Web</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>
+ <p>Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. A página da demo <a href="http://mdn.github.io/web-storage-demo/">landing page</a> oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em <code>localStorage</code>,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.</p>
+
+<p>Nós também fornecemos um <a href="http://mdn.github.io/web-storage-demo/event.html">event output page</a> —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Propriedade</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte 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 os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da <a href="http://dev-test.nemikor.com/web-storage/support-test/">capacidade de armazenamento de vários navegadores</a>.</p>
+
+<div class="note">
+<p>Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.</p>
+</div>
+
+<h2 id="Navegação_privada_modo_de_navegação_anônima">Navegação privada /modo de navegação anônima</h2>
+
+<p>Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.</p>
+
+<p>A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.</p>
+
+<p>Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste <a href="https://blog.whatwg.org/tag/localstorage">post</a> escrito no blog do WHATWG que lida especificamente com este tópico.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..eb9807f0ef
--- /dev/null
+++ b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html
@@ -0,0 +1,267 @@
+---
+title: Usando a API Web Storage
+slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API
+tags:
+  - API
+  - Guía
+  - Storage
+  - Web Storage API
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<div class="summary">
+<p>A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.</p>
+</div>
+
+<h2 id="Conceitos_básicos">Conceitos básicos</h2>
+
+<p>Objetos <code>Storage</code> são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de <code>corDefinida</code> de maneiras diferentes, mas com o mesmo resultado:</p>
+
+<pre class="brush: js" style="white-space: pre;">localStorage.corDefinida = '#a4509b';
+localStorage['corDefinida'] = '#a4509b';
+localStorage.setItem('corDefinida', '#a4509b');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Recomendamos que você utilize a API Web Storage (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) para evitar as <a href="http://www.2ality.com/2012/01/objects-as-maps.html">armadilhas</a> associadas ao uso de objetos literais como mapas de chave-valor.</p>
+</div>
+
+<p>Os dois mecanismos presentes na Web Storage são os seguintes:</p>
+
+<ul>
+ <li>O<strong> <code>sessionStorage</code> </strong>mantém uma área de armazenamento separada para cada origem diferente. Cada uma dessas áreas fica disponível durante a sessão da página (ou seja, enquanto a aba do navegador estiver aberta, incluindo recarregamentos e restaurações de páginas).</li>
+ <li>O <strong><code>localStorage</code> </strong>faz a mesma coisa, mas os dados armazenados aqui continuam existindo mesmo depois do navegador ser fechado e reaberto.</li>
+</ul>
+
+<p>Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto <code>Window</code> implementa os objetos <code>WindowLocalStorage</code> e <code>WindowSessionStorage</code>, aos quais as propriedades <code>localStorage</code> and <code>sessionStorage</code> pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para <code>sessionStorage</code> and <code>localStorage</code> — eles operam e são controlados separadamente.</p>
+
+<p>Por exemplo, chamar <code>localStorage</code> pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar <code>sessionStorage</code> em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.</p>
+
+<h2 id="Detectando_a_disponibilidade_do_localStorage">Detectando a disponibilidade do localStorage</h2>
+
+<p>Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.</p>
+
+<h3 id="Testando_a_disponibilidade">Testando a disponibilidade</h3>
+
+<p>Navegadores compatíveis com localStorage terão uma propriedade no objeto <code>window</code> chamada <code>localStorage</code>. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser <em>compatível</em> com o localStorage, mas também pode não torná-lo <em>disponível</em> para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually <em>available</em>. Our feature detect should take these scenarios into account.</p>
+
+<p>Here is a function that detects whether localStorage is both supported and available:</p>
+
+<pre class="brush: js">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            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.length !== 0;
+    }
+}</pre>
+
+<p>And here is how you would use it:</p>
+
+<pre class="brush: js">if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}</pre>
+
+<p>You can test for sessionStorage instead by calling <code>storageAvailable('sessionStorage')</code>.</p>
+
+<p>See here for a <a href="https://gist.github.com/paulirish/5558557">brief history of feature-detecting localStorage</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>To illustrate some typical web storage usage, we have created a simple example, imaginatively called <strong>Web Storage Demo</strong>. The <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> provides controls that can be used to customize the color, font, and decorative image:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">When you choose different options, the page is instantly updated; in addition, your choices are stored in <code>localStorage</code>, so that when you leave the page and load it again, later on, your choices are remembered.</p>
+
+<p>We have also provided an <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.</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>Note</strong>: As well as viewing the example pages live using the above links, you can also <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">check out the source code</a>.</p>
+</div>
+
+<h3 id="Testing_whether_your_storage_has_been_populated">Testing whether your storage has been populated</h3>
+
+<p>To start with on <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, we will test whether the storage object has already been populated (i.e., the page was previously accessed):</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the <code>bgcolor</code> item exists; if not, we run <code>populateStorage()</code> to add the existing customization values to the storage. If there are already values there, we run <code>setStyles()</code> to update the page styling with the stored values.</p>
+
+<p><strong>Note</strong>: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.</p>
+
+<h3 id="Getting_values_from_storage">Getting values from storage</h3>
+
+<p>As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:</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>
+
+<p>Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p>
+
+<h3 id="Setting_values_in_storage">Setting values in storage</h3>
+
+<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p>
+
+<pre class="brush: js">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>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p>
+
+<p>We've also included an <code>onchange</code> handler on each form element so that the data and styling are updated whenever a form value is changed:</p>
+
+<pre class="brush: js">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h3 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h3>
+
+<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p>
+
+<p>On the events page (see <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) the only JavaScript is as follows:</p>
+
+<pre class="brush: js">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 = e.storageArea;
+});</pre>
+
+<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.</p>
+
+<h3 id="Deleting_data_records">Deleting data records</h3>
+
+<p>Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.</li>
+ <li>{{domxref("Storage.clear()")}} takes no arguments, and simply empties the entire storage object for that domain.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</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">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>Feature</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>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li>
+</ul>