---
title: Saklama
slug: Web/API/Storage
tags:
  - API
  - Arayüz
  - Başvuru
  - Depolama
  - Referans
  - Saklama
  - Veri
  - Web Depolama
  - Web Saklama
translation_of: Web/API/Storage
---
<p>{{APIRef("Web Storage API")}}</p>

<p>Web Saklama API'nin Storage arayüzü belirli bir alan için oturum belleğine ya da yerel belleğe erişim sağlar, örneğin saklanmış veri öğelerini ekleme, değiştirme ya da silme izni verir.</p>

<p>Bir alan için oturum belleğini değiştirmek istiyorsanız, {{domxref("Window.sessionStorage")}} yöntemini çağırın; bir alan için yerel belleğini değiştirmek istiyorsanız, {{domxref("Window.localStorage")}} çağırın.</p>

<h2 id="Özellikler">Özellikler</h2>

<dl>
 <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
 <dd><code>Storage</code><span lang="tr"> <span class="hps">nesnesinde saklanan</span> <span class="hps">veri</span> <span class="hps">öğelerinin</span> <span class="hps">sayısını</span> belirten<span class="hps"> bir</span> <span class="hps">tamsayı</span> <span class="hps">döndürür.</span></span></dd>
</dl>

<h2 id="Yöntemler">Yöntemler</h2>

<dl>
 <dt>{{domxref("Storage.key()")}}</dt>
 <dd>Bir n numarası olduğunda, bu yöntem bellekte n. anahtarın ismini döndürecektir.</dd>
</dl>

<dl>
 <dt>{{domxref("Storage.getItem()")}}</dt>
 <dd>Bir anahtar numarası olduğunda, bu anahtarın değerini döndürecektir.</dd>
 <dt>{{domxref("Storage.setItem()")}}</dt>
 <dd>Bir anahtarın ismi ile değeri olduğunda, bu anahtarı belleğe ekler ya da bu anahtarın değeri önceden varsa günceller.</dd>
 <dt>{{domxref("Storage.removeItem()")}}</dt>
 <dd>Bir anahtarın ismi olduğunda, bu anahtarı bellekten siler.</dd>
 <dt>{{domxref("Storage.clear()")}}</dt>
 <dd>Çağrıldığında, bütün anahtarları belleğin dışına boşaltacaktır.</dd>
</dl>

<h2 id="Örnekler">Örnekler</h2>

<p>Bir <code>Storage</code> nesnesini <code>localStorage</code> yolu ile çağırıyoruz. Here we access a <code>Storage</code> object by calling <code>localStorage</code>. Yerel belleğin <code>!localStorage.getItem('bgcolor')</code> kullanarak veri içerip içermediğini sınıyoruz. Olursa, {{domxref("localStorage.getItem()")}} kullanarak veri öğesi alan <code>setStyles()</code> isminde bir fonksiyon çağırıyoruz ve şu değerleri kullanarak sayfa biçimlerini güncelliyoruz. Olmazsa, diğer <code>populateStorage()</code> fonksiyonu çağrılır, {{domxref("localStorage.setItem()")}} kullanarak öğelerinin değerlerini belirlemek için ardından <code>setStyles()</code> çağrılır.</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>Not</strong>: <span id="result_box" lang="tr"><span class="hps">Tam bir</span> <span class="hps">çalışma</span> <span class="hps">örneği olarak</span> <span class="hps">çalışanı</span></span><span lang="tr"> <span class="hps">görmek için, <a href="https://github.com/mdn/web-storage-demo">Web Bellek Tanıtımınıza</a> bakınız.</span></span></p>
</div>

<h2 id="Tanımlamalar">Tanımlamalar</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('Web Storage', '#the-storage-interface', 'Storage')}}</td>
   <td>{{Spec2('Web Storage')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</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>3.2[1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] iOS 5.1'ten beri, Safari Mobile <code>localStorage</code> verisini önbellek dizinine kaydeder, genelde boş yer kısa ise zaman zaman bağlı olan işletim sistemi buyruğu ile temizlenir.</p>

<p>Bütün tarayıcılar localStorage ile sessionStorage için değişen seviyede hacim sahiptirler. Burada <a href="http://dev-test.nemikor.com/web-storage/support-test/">çeşitli tarayıcılar için bütün bellek hacimlerinin ayrıntılı özeti</a>.</p>

<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2>

<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Belleği API'sini Kullanma</a></p>