{"id":37703,"date":"2026-01-13T00:41:08","date_gmt":"2026-01-12T21:41:08","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37703"},"modified":"2026-01-13T00:41:08","modified_gmt":"2026-01-12T21:41:08","slug":"localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/","title":{"rendered":"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131"},"content":{"rendered":"

<\/p>\n

localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131<\/h2>\n

Web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve performans\u0131 art\u0131rmak amac\u0131yla s\u0131kl\u0131kla istemci taraf\u0131nda veri depolama ihtiyac\u0131 duyar. Kullan\u0131c\u0131 tercihleri, oturum bilgileri, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekler veya ge\u00e7ici veriler gibi \u00e7e\u015fitli bilgilerin taray\u0131c\u0131da saklanmas\u0131, hem sunucu y\u00fck\u00fcn\u00fc azalt\u0131r hem de daha h\u0131zl\u0131 ve ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunar. Geleneksel olarak bu t\u00fcr ihtiya\u00e7lar i\u00e7in \u00e7erezler (cookies) kullan\u0131l\u0131rd\u0131, ancak \u00e7erezlerin birtak\u0131m s\u0131n\u0131rlamalar\u0131 modern web uygulamalar\u0131n\u0131n beklentilerini kar\u015f\u0131lamakta yetersiz kalm\u0131\u015ft\u0131r. Bu noktada, Web Storage API’si devreye girerek, localStorage<\/code> ve sessionStorage<\/code> ad\u0131n\u0131 verdi\u011fimiz iki g\u00fc\u00e7l\u00fc ve esnek mekanizma sunmu\u015ftur.<\/p>\n

Bu makalede, localStorage<\/code> ve sessionStorage<\/code>‘\u0131n ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, temel kullan\u0131m senaryolar\u0131n\u0131, metodlar\u0131n\u0131, aralar\u0131ndaki farklar\u0131, g\u00fcvenlik hususlar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, Web Storage API’sinin \u00e7erezlere g\u00f6re avantajlar\u0131n\u0131 ve di\u011fer istemci taraf\u0131 depolama se\u00e7eneklerine k\u0131yasla konumunu da ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftiricilere bu iki g\u00fc\u00e7l\u00fc arac\u0131n potansiyelini tam olarak anlama ve projelerinde etkin bir \u015fekilde kullanma konusunda kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n

Cookies’den Web Storage’a: Neden Bir De\u011fi\u015fime \u0130htiya\u00e7 Duyuldu?<\/h3>\n

Web’in ilk y\u0131llar\u0131ndan itibaren, istemci taraf\u0131nda veri depolama ihtiyac\u0131 do\u011fdu\u011funda akla gelen ilk \u00e7\u00f6z\u00fcm \u00e7erezler (cookies) olmu\u015ftur. \u00c7erezler, sunucunun kullan\u0131c\u0131 taray\u0131c\u0131s\u0131na k\u00fc\u00e7\u00fck metin dosyalar\u0131 g\u00f6ndermesine ve bu dosyalar\u0131n daha sonra ayn\u0131 sunucuya yap\u0131lan her HTTP iste\u011fiyle birlikte geri g\u00f6nderilmesine olanak tan\u0131r. Oturum y\u00f6netimi, kullan\u0131c\u0131 takibi ve ki\u015fiselle\u015ftirme gibi bir\u00e7ok temel i\u015flevde \u00e7erezler \u00f6nemli bir rol oynam\u0131\u015ft\u0131r. Ancak, modern web uygulamalar\u0131n\u0131n artan karma\u015f\u0131kl\u0131\u011f\u0131 ve veri depolama gereksinimleri, \u00e7erezlerin baz\u0131 temel s\u0131n\u0131rlamalar\u0131n\u0131 ortaya \u00e7\u0131karm\u0131\u015ft\u0131r:<\/p>\n

* Boyut S\u0131n\u0131rlamas\u0131:<\/strong> \u00c7erezler genellikle 4 KB ile s\u0131n\u0131rl\u0131d\u0131r. Bu, b\u00fcy\u00fck miktarda veri depolamak i\u00e7in yetersizdir ve geli\u015ftiricileri verileri par\u00e7alamaya veya ba\u015fka \u00e7\u00f6z\u00fcmler aramaya iter.
\n* Performans Y\u00fck\u00fc:<\/strong> \u00c7erezler, her HTTP iste\u011fiyle (g\u00f6rseller, CSS, JavaScript dosyalar\u0131 dahil) otomatik olarak sunucuya g\u00f6nderilir. Bu durum, gereksiz a\u011f trafi\u011fi olu\u015fturarak performans\u0131 olumsuz etkileyebilir, \u00f6zellikle mobil a\u011flarda veya y\u00fcksek gecikmeli ba\u011flant\u0131larda.
\n* G\u00fcvenlik Riskleri:<\/strong> \u00c7erezler, HttpOnly<\/code> bayra\u011f\u0131 ile korunmad\u0131k\u00e7a JavaScript taraf\u0131ndan eri\u015filebilir durumdad\u0131r. Bu, siteler aras\u0131 komut \u00e7al\u0131\u015ft\u0131rma (XSS) sald\u0131r\u0131lar\u0131nda hassas bilgilerin \u00e7al\u0131nmas\u0131 riskini do\u011furur. Ayr\u0131ca, her istekle g\u00f6nderilmeleri, man-in-the-middle sald\u0131r\u0131lar\u0131nda da risk olu\u015fturabilir.
\n* Karma\u015f\u0131k API:<\/strong> \u00c7erezler, do\u011frudan anahtar-de\u011fer \u00e7iftleri olarak depolansa da, okunmalar\u0131 ve yaz\u0131lmalar\u0131 document.cookie<\/code> dizesini manuel olarak ayr\u0131\u015ft\u0131rmay\u0131 veya manip\u00fcle etmeyi gerektirir, bu da kod yaz\u0131m\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131r\u0131r.
\n* S\u00fcre Sonu Y\u00f6netimi:<\/strong> \u00c7erezlerin bir s\u00fcre sonu (expiration) de\u011feri vard\u0131r ve bu de\u011ferin do\u011fru bir \u015fekilde y\u00f6netilmesi gerekir. S\u00fcresi dolan \u00e7erezler otomatik olarak silinir.<\/p>\n

Bu s\u0131n\u0131rlamalar, web geli\u015ftiricilerini daha modern, daha kapasiteli ve daha kullan\u0131m\u0131 kolay istemci taraf\u0131 depolama \u00e7\u00f6z\u00fcmlerine y\u00f6nlendirmi\u015ftir. \u0130\u015fte bu noktada Web Storage API’si, \u00f6zellikle localStorage<\/code> ve sessionStorage<\/code>, \u00e7erezlerin yerini alabilecek veya onlar\u0131 tamamlayabilecek g\u00fc\u00e7l\u00fc alternatifler olarak ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Web Storage, daha b\u00fcy\u00fck depolama kapasitesi, daha basit bir API ve sunucuya g\u00f6nderilmeme avantajlar\u0131yla modern web uygulamalar\u0131n\u0131n ihtiya\u00e7lar\u0131na \u00e7ok daha iyi yan\u0131t vermektedir.<\/p>\n

Web Storage API Nedir?<\/h3>\n

Web Storage API’si, HTML5 ile birlikte tan\u0131t\u0131lan ve web uygulamalar\u0131n\u0131n istemci taraf\u0131nda, yani kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda veri depolamas\u0131na olanak tan\u0131yan bir dizi ara\u00e7t\u0131r. Bu API, localStorage<\/code> ve sessionStorage<\/code> olmak \u00fczere iki ana nesne \u00fczerinden \u00e7al\u0131\u015f\u0131r. Her ikisi de anahtar-de\u011fer \u00e7iftleri (key-value pairs) \u015feklinde veri depolama prensibine dayan\u0131r ve JavaScript arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015filebilir ve y\u00f6netilebilir.<\/p>\n

Web Storage’\u0131n temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n

* Basit Anahtar-De\u011fer Depolama:<\/strong> Veriler, benzersiz bir anahtar ile ili\u015fkilendirilmi\u015f bir de\u011fer olarak saklan\u0131r. Hem anahtar hem de de\u011fer her zaman birer dize (string) olmal\u0131d\u0131r. E\u011fer bir JavaScript nesnesi veya dizisi depolamak isterseniz, JSON.stringify()<\/code> kullanarak dizeye d\u00f6n\u00fc\u015ft\u00fcrmeniz, al\u0131rken de JSON.parse()<\/code> kullanarak orijinal haline getirmeniz gerekir.
\n* Daha B\u00fcy\u00fck Kapasite:<\/strong> \u00c7erezlerin 4 KB’l\u0131k s\u0131n\u0131rlamas\u0131n\u0131n aksine, Web Storage genellikle taray\u0131c\u0131ya ve cihaza ba\u011fl\u0131 olarak 5 MB ila 10 MB aras\u0131nda bir depolama alan\u0131 sunar. Bu, daha b\u00fcy\u00fck miktarda verinin istemci taraf\u0131nda saklanabilmesi anlam\u0131na gelir.
\n* \u0130stemci Taraf\u0131 Depolama:<\/strong> Web Storage’da depolanan veriler, HTTP istekleriyle sunucuya g\u00f6nderilmez. Bu, hem a\u011f trafi\u011fini azalt\u0131r hem de performans\u0131 art\u0131r\u0131r. Verilere yaln\u0131zca istemci taraf\u0131ndaki JavaScript kodu eri\u015febilir.
\n* Origin (Domain) Bazl\u0131 G\u00fcvenlik:<\/strong> Her iki depolama t\u00fcr\u00fc de ayn\u0131 k\u00f6ken politikas\u0131na (Same-Origin Policy) tabidir. Bu, bir web sitesinin yaln\u0131zca kendi k\u00f6keninden (protokol, alan ad\u0131 ve port kombinasyonu) depolad\u0131\u011f\u0131 verilere eri\u015febilece\u011fi anlam\u0131na gelir. Farkl\u0131 bir k\u00f6kene sahip siteler, birbirlerinin depolad\u0131\u011f\u0131 verilere do\u011frudan eri\u015femez.
\n* Senkron \u00c7al\u0131\u015fma:<\/strong> Web Storage i\u015flemleri (veri yazma, okuma, silme) senkrondur. Bu, i\u015flem tamamlanana kadar ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n (main thread) bloke olabilece\u011fi anlam\u0131na gelir. K\u00fc\u00e7\u00fck veriler i\u00e7in genellikle sorun te\u015fkil etmese de, \u00e7ok b\u00fcy\u00fck verilerle \u00e7al\u0131\u015f\u0131rken dikkatli olunmal\u0131d\u0131r.<\/p>\n

Web Storage API’si, window.localStorage<\/code> ve window.sessionStorage<\/code> global nesneleri arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir. Bu nesneler, verileri y\u00f6netmek i\u00e7in ayn\u0131 metod setine sahiptir. Aralar\u0131ndaki temel fark, verinin kal\u0131c\u0131l\u0131\u011f\u0131 ve kapsam\u0131d\u0131r.<\/p>\n

localStorage Detayl\u0131 \u0130nceleme<\/h3>\n

localStorage<\/code> nesnesi, web uygulamalar\u0131n\u0131n taray\u0131c\u0131da kal\u0131c\u0131 olarak veri depolamas\u0131n\u0131 sa\u011flayan bir Web Storage mekanizmas\u0131d\u0131r. “Kal\u0131c\u0131” kelimesi burada anahtar bir role sahiptir; \u00e7\u00fcnk\u00fc localStorage<\/code>‘a kaydedilen veriler, taray\u0131c\u0131 kapat\u0131l\u0131p a\u00e7\u0131lsa bile, hatta bilgisayar yeniden ba\u015flat\u0131lsa bile kaybolmaz. Veriler, kullan\u0131c\u0131 veya web uygulamas\u0131 taraf\u0131ndan a\u00e7\u0131k\u00e7a silinene kadar taray\u0131c\u0131da saklanmaya devam eder.<\/p>\n

Kal\u0131c\u0131 Veri Depolama<\/h4>\n

localStorage<\/code>‘\u0131n en belirgin \u00f6zelli\u011fi, verilerin kal\u0131c\u0131l\u0131\u011f\u0131d\u0131r. Bir kullan\u0131c\u0131 bir web sitesini ziyaret etti\u011finde ve bu site localStorage<\/code>‘a veri yazd\u0131\u011f\u0131nda, bu veriler taray\u0131c\u0131n\u0131n yerel depolama alan\u0131nda saklan\u0131r. Kullan\u0131c\u0131 taray\u0131c\u0131 sekmesini kapatsa, taray\u0131c\u0131y\u0131 tamamen kapatsa veya bilgisayar\u0131n\u0131 yeniden ba\u015flatsa bile, ayn\u0131 k\u00f6kenden (domain) siteyi tekrar ziyaret etti\u011finde bu verilere eri\u015febilir. Veriler ancak a\u015fa\u011f\u0131daki durumlarda silinir:<\/p>\n

* Web uygulamas\u0131, JavaScript kodu arac\u0131l\u0131\u011f\u0131yla veriyi a\u00e7\u0131k\u00e7a siler (removeItem()<\/code> veya clear()<\/code>).
\n* Kullan\u0131c\u0131, taray\u0131c\u0131s\u0131n\u0131n ayarlar\u0131ndan site verilerini veya t\u00fcm taray\u0131c\u0131 ge\u00e7mi\u015fini\/\u00f6nbelle\u011fini temizler.
\n* Taray\u0131c\u0131 veya i\u015fletim sistemi d\u00fczeyinde bir sorun olu\u015fur (nadiren).<\/p>\n

Bu kal\u0131c\u0131l\u0131k, localStorage<\/code>‘\u0131 belirli kullan\u0131m senaryolar\u0131 i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n

Kullan\u0131m Senaryolar\u0131<\/h4>\n

localStorage<\/code>, genellikle uzun s\u00fcreli veya kal\u0131c\u0131 olmas\u0131 beklenen kullan\u0131c\u0131ya \u00f6zel verileri depolamak i\u00e7in kullan\u0131l\u0131r:<\/p>\n

* Kullan\u0131c\u0131 Tercihleri:<\/strong> Tema se\u00e7imi (a\u00e7\u0131k\/koyu mod), dil tercihleri, yaz\u0131 tipi boyutu, bildirim ayarlar\u0131 gibi ki\u015fiselle\u015ftirme se\u00e7enekleri.
\n* \u00c7evrimd\u0131\u015f\u0131 Veri Depolama\/\u00d6nbellekleme:<\/strong> Bir uygulaman\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilmesi i\u00e7in gerekli olan statik kaynaklar, s\u0131k\u00e7a eri\u015filen veriler veya kullan\u0131c\u0131n\u0131n olu\u015fturdu\u011fu taslaklar (\u00f6rne\u011fin, bir blog g\u00f6nderisi tasla\u011f\u0131).
\n* Al\u0131\u015fveri\u015f Sepeti \u0130\u00e7eri\u011fi:<\/strong> Kullan\u0131c\u0131 hen\u00fcz giri\u015f yapmam\u0131\u015f olsa bile, al\u0131\u015fveri\u015f sepetine ekledi\u011fi \u00fcr\u00fcnlerin bilgilerini kal\u0131c\u0131 olarak saklamak.
\n* Kullan\u0131c\u0131 Kimlik Do\u011frulama Tokenlar\u0131:<\/strong> JWT (JSON Web Token) gibi kimlik do\u011frulama tokenlar\u0131, kullan\u0131c\u0131n\u0131n oturumunu s\u00fcrd\u00fcrmek i\u00e7in localStorage<\/code>‘da saklanabilir (ancak g\u00fcvenlik riskleri nedeniyle bu konuda dikkatli olunmal\u0131d\u0131r).
\n* Performans Optimizasyonu:<\/strong> Sunucudan s\u0131k\u00e7a \u00e7ekilen ancak s\u0131k de\u011fi\u015fmeyen verileri (\u00f6rne\u011fin, bir \u00fcr\u00fcn katalo\u011fu veya statik i\u00e7erik) \u00f6nbelle\u011fe almak, sonraki y\u00fcklemelerde daha h\u0131zl\u0131 eri\u015fim sa\u011flar.<\/p>\n

Temel Metotlar<\/h4>\n

localStorage<\/code> nesnesi, verileri y\u00f6netmek i\u00e7in basit ve sezgisel bir API sunar:<\/p>\n

* localStorage.setItem(key, value)<\/code>: Belirtilen anahtar (key) ile de\u011feri (value) localStorage<\/code>‘a kaydeder. Hem anahtar hem de de\u011fer dize (string) olmal\u0131d\u0131r. E\u011fer anahtar zaten varsa, de\u011feri g\u00fcncellenir.
\n* localStorage.getItem(key)<\/code>: Belirtilen anahtara kar\u015f\u0131l\u0131k gelen de\u011feri d\u00f6nd\u00fcr\u00fcr. E\u011fer anahtar bulunamazsa null<\/code> d\u00f6nd\u00fcr\u00fcr.
\n* localStorage.removeItem(key)<\/code>: Belirtilen anahtara sahip \u00f6\u011feyi localStorage<\/code>‘dan siler.
\n* localStorage.clear()<\/code>: localStorage<\/code>‘daki t\u00fcm \u00f6\u011feleri siler. Bu i\u015flem geri al\u0131namaz.
\n* localStorage.key(index)<\/code>: Belirtilen dizindeki (0’dan ba\u015flayarak) anahtar\u0131n ad\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.
\n* localStorage.length<\/code>: localStorage<\/code>‘daki depolanm\u0131\u015f \u00f6\u011felerin say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\n

\u00d6rnek Kullan\u0131m<\/h4>\n

A\u015fa\u011f\u0131daki JavaScript kod \u00f6rnekleri, localStorage<\/code>‘\u0131n temel metotlar\u0131n\u0131 g\u00f6stermektedir:<\/p>\n

\/\/ 1. Veri Kaydetme (setItem)\n\/\/ Not: Sadece string depolayabiliriz. Nesneleri JSON.stringify ile d\u00f6n\u00fc\u015ft\u00fcrmeliyiz.\nlocalStorage.setItem('kullaniciAdi', 'Alice');\nlocalStorage.setItem('temaTercihi', 'dark');\n\nconst kullaniciAyarlari = {\n  dil: 'tr',\n  bildirimlerAcik: true,\n  sonGiris: new Date()\n};\nlocalStorage.setItem('ayarlar', JSON.stringify(kullaniciAyarlari));\n\nconsole.log('Veriler kaydedildi.');\n\n\/\/ 2. Veri Okuma (getItem)\nconst kaydedilenKullaniciAdi = localStorage.getItem('kullaniciAdi');\nconsole.log('Kaydedilen kullan\u0131c\u0131 ad\u0131:', kaydedilenKullaniciAdi); \/\/ \u00c7\u0131kt\u0131: Alice\n\nconst kaydedilenTema = localStorage.getItem('temaTercihi');\nconsole.log('Kaydedilen tema tercihi:', kaydedilenTema); \/\/ \u00c7\u0131kt\u0131: dark\n\nconst kaydedilenAyarlarJSON = localStorage.getItem('ayarlar');\nif (kaydedilenAyarlarJSON) {\n  const ayarlarObjesi = JSON.parse(kaydedilenAyarlarJSON);\n  console.log('Kaydedilen ayarlar:', ayarlarObjesi);\n  console.log('Dil ayar\u0131:', ayarlarObjesi.dil); \/\/ \u00c7\u0131kt\u0131: tr\n}\n\n\/\/ 3. Veri Silme (removeItem)\nlocalStorage.removeItem('temaTercihi');\nconsole.log('Tema tercihi silindi.');\n\nconst temaTekrarKontrol = localStorage.getItem('temaTercihi');\nconsole.log('Tema tercihi (silindikten sonra):', temaTekrarKontrol); \/\/ \u00c7\u0131kt\u0131: null\n\n\/\/ 4. T\u00fcm Verileri Silme (clear)\n\/\/ Dikkat: Bu i\u015flem t\u00fcm localStorage verilerini siler!\n\/\/ localStorage.clear();\n\/\/ console.log('T\u00fcm localStorage verileri silindi.');\n\n\/\/ 5. Anahtar Ad\u0131na ve Uzunlu\u011funa Eri\u015fim\nconsole.log('Depolanan \u00f6\u011fe say\u0131s\u0131:', localStorage.length); \/\/ \u00d6\u011fe say\u0131s\u0131n\u0131 g\u00f6sterir\n\nfor (let i = 0; i < localStorage.length; i++) {\n  const key = localStorage.key(i);\n  const value = localStorage.getItem(key);\n  console.log(Anahtar: ${key}, De\u011fer: ${value}<\/code>);\n}<\/code><\/pre>\n
S\u0131n\u0131rlamalar ve Dikkat Edilmesi Gerekenler<\/h4>\n
localStorage<\/code> g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, kullan\u0131rken g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken baz\u0131 s\u0131n\u0131rlamalar\u0131 ve g\u00fcvenlik endi\u015feleri vard\u0131r:<\/p>\n
*   Sadece String Depolama:<\/strong> localStorage<\/code> sadece dize (string) t\u00fcr\u00fcndeki verileri depolayabilir. Nesneler, diziler, say\u0131lar veya boolean de\u011ferler gibi di\u011fer veri t\u00fcrlerini depolamak i\u00e7in JSON.stringify()<\/code> ile dizeye d\u00f6n\u00fc\u015ft\u00fcrmeniz ve al\u0131rken JSON.parse()<\/code> ile tekrar d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekir.
\n*   Senkron \u00c7al\u0131\u015fma:<\/strong> T\u00fcm localStorage<\/code> i\u015flemleri senkrondur. Bu, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke edebilir ve uygulaman\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) ge\u00e7ici olarak dondurabilir. Bu t\u00fcr senaryolar i\u00e7in IndexedDB gibi asenkron \u00e7\u00f6z\u00fcmler daha uygun olabilir.
\n*   G\u00fcvenlik Endi\u015feleri (XSS):<\/strong> localStorage<\/code>‘da depolanan verilere JavaScript arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015filebilir. E\u011fer web siteniz bir siteler aras\u0131 komut \u00e7al\u0131\u015ft\u0131rma (XSS) sald\u0131r\u0131s\u0131na maruz kal\u0131rsa, k\u00f6t\u00fc niyetli kod localStorage<\/code>‘daki t\u00fcm verilere eri\u015febilir ve bunlar\u0131 \u00e7alabilir. Bu nedenle, localStorage<\/code>‘da asla hassas bilgiler (\u015fifreler, kredi kart\u0131 numaralar\u0131, ki\u015fisel kimlik bilgileri) saklanmamal\u0131d\u0131r. Kimlik do\u011frulama tokenlar\u0131 gibi veriler depolanacaksa, bu tokenlar\u0131n k\u0131sa \u00f6m\u00fcrl\u00fc olmas\u0131 ve sunucu taraf\u0131nda do\u011frulanmas\u0131 gibi ek g\u00fcvenlik \u00f6nlemleri al\u0131nmal\u0131d\u0131r.
\n*   Veri B\u00fct\u00fcnl\u00fc\u011f\u00fc:<\/strong> localStorage<\/code>‘daki veriler istemci taraf\u0131nda depoland\u0131\u011f\u0131 i\u00e7in kullan\u0131c\u0131 taraf\u0131ndan kolayca de\u011fi\u015ftirilebilir. Bu nedenle, uygulaman\u0131z\u0131n kritik mant\u0131\u011f\u0131n\u0131 localStorage<\/code>‘daki verilere tamamen dayand\u0131rmamal\u0131s\u0131n\u0131z. Sunucu taraf\u0131nda her zaman veri do\u011frulamas\u0131 yap\u0131lmal\u0131d\u0131r.
\n*   Depolama Limitleri:<\/strong> Taray\u0131c\u0131ya g\u00f6re de\u011fi\u015fmekle birlikte, genellikle 5-10 MB gibi bir depolama limiti vard\u0131r. Bu limit a\u015f\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131 bir hata f\u0131rlatabilir.
\n*   Veri \u015eifreleme Yok:<\/strong> localStorage<\/code> verileri varsay\u0131lan olarak \u015fifrelenmez. Taray\u0131c\u0131da d\u00fcz metin olarak saklan\u0131r. Bu da hassas veriler i\u00e7in b\u00fcy\u00fck bir risk olu\u015fturur.<\/p>\n
sessionStorage Detayl\u0131 \u0130nceleme<\/h3>\n
sessionStorage<\/code> nesnesi, localStorage<\/code>‘a benzer \u015fekilde anahtar-de\u011fer \u00e7iftleri halinde veri depolayan bir Web Storage mekanizmas\u0131d\u0131r. Ancak, sessionStorage<\/code>‘\u0131n temel fark\u0131, verilerin kal\u0131c\u0131l\u0131\u011f\u0131 ve kapsam\u0131d\u0131r. sessionStorage<\/code>‘a kaydedilen veriler, sadece o taray\u0131c\u0131 oturumu boyunca ge\u00e7erlidir.<\/p>\n
Oturum Bazl\u0131 Veri Depolama<\/h4>\n
sessionStorage<\/code>‘\u0131n en belirgin \u00f6zelli\u011fi, verilerin “oturum bazl\u0131” olmas\u0131d\u0131r. Bir oturum, bir taray\u0131c\u0131 sekmesinin veya penceresinin a\u00e7\u0131k kald\u0131\u011f\u0131 s\u00fcre boyunca devam eder.<\/p>\n
*   Sekme\/Pencere Kapat\u0131ld\u0131\u011f\u0131nda Veri Kayb\u0131:<\/strong> Bir taray\u0131c\u0131 sekmesi veya penceresi kapat\u0131ld\u0131\u011f\u0131nda, o sekmenin sessionStorage<\/code>‘\u0131nda depolanan t\u00fcm veriler otomatik olarak silinir.
\n*   Yeni Sekme\/Pencere = Yeni Oturum:<\/strong> Ayn\u0131 web sitesini farkl\u0131 bir taray\u0131c\u0131 sekmesinde veya penceresinde a\u00e7t\u0131\u011f\u0131n\u0131zda, bu yeni sekme\/pencere tamamen ba\u011f\u0131ms\u0131z bir sessionStorage<\/code> oturumu ba\u015flat\u0131r. Yani, bir sekmede depolanan veriler, di\u011fer bir sekmede otomatik olarak eri\u015filemez.
\n*   Yenileme Kal\u0131c\u0131l\u0131\u011f\u0131:<\/strong> Sayfa yenilendi\u011finde (F5 veya taray\u0131c\u0131n\u0131n yenileme d\u00fc\u011fmesi), sessionStorage<\/code>‘daki veriler korunur. Bu, kullan\u0131c\u0131n\u0131n o anki oturumdaki durumunu s\u00fcrd\u00fcrmek i\u00e7in faydal\u0131d\u0131r.
\n*   Taray\u0131c\u0131 Kapat\u0131ld\u0131\u011f\u0131nda Veri Kayb\u0131:<\/strong> Taray\u0131c\u0131n\u0131n tamam\u0131 kapat\u0131ld\u0131\u011f\u0131nda, t\u00fcm sessionStorage<\/code> verileri silinir.<\/p>\n
Bu oturum bazl\u0131 do\u011fa, sessionStorage<\/code>‘\u0131 ge\u00e7ici veya oturuma \u00f6zel verileri depolamak i\u00e7in ideal k\u0131lar.<\/p>\n
Kullan\u0131m Senaryolar\u0131<\/h4>\n
sessionStorage<\/code>, genellikle bir kullan\u0131c\u0131n\u0131n tek bir oturum i\u00e7indeki belirli bir g\u00f6revi veya yolculu\u011fu s\u0131ras\u0131nda ihtiya\u00e7 duyulan ge\u00e7ici verileri depolamak i\u00e7in kullan\u0131l\u0131r:<\/p>\n
*   \u00c7ok Ad\u0131ml\u0131 Formlar:<\/strong> Bir kullan\u0131c\u0131n\u0131n bir formu doldururken ad\u0131mlar aras\u0131nda ge\u00e7i\u015f yaparken girdi\u011fi verileri ge\u00e7ici olarak saklamak. \u00d6rne\u011fin, \u00f6deme veya kay\u0131t formlar\u0131.
\n*   Ge\u00e7ici Kullan\u0131c\u0131 Giri\u015fleri:<\/strong> Bir kullan\u0131c\u0131n\u0131n bir oturum boyunca yapt\u0131\u011f\u0131 belirli se\u00e7imleri veya giri\u015fleri (\u00f6rne\u011fin, filtre se\u00e7enekleri, s\u0131ralama tercihleri) saklamak.
\n*   Tek Oturumluk Al\u0131\u015fveri\u015f Sepeti:<\/strong> Kullan\u0131c\u0131n\u0131n sadece o oturum i\u00e7in ge\u00e7erli olacak bir al\u0131\u015fveri\u015f sepeti olu\u015fturmas\u0131.
\n*   Gezinme Durumu:<\/strong> Kullan\u0131c\u0131n\u0131n bir \u00f6nceki sayfada nerede kald\u0131\u011f\u0131, hangi \u00f6\u011felerin a\u00e7\u0131k oldu\u011fu gibi oturuma \u00f6zel aray\u00fcz durumlar\u0131n\u0131 korumak.
\n*   Oturuma \u00d6zel Mesajlar:<\/strong> Yaln\u0131zca o oturumda g\u00f6r\u00fcnt\u00fclenecek bildirimler veya hata mesajlar\u0131.<\/p>\n
Temel Metotlar<\/h4>\n
sessionStorage<\/code> nesnesi, localStorage<\/code> ile tamamen ayn\u0131 metod setine sahiptir:<\/p>\n
*   sessionStorage.setItem(key, value)<\/code>: Belirtilen anahtar ile de\u011feri sessionStorage<\/code>‘a kaydeder.
\n*   sessionStorage.getItem(key)<\/code>: Belirtilen anahtara kar\u015f\u0131l\u0131k gelen de\u011feri d\u00f6nd\u00fcr\u00fcr.
\n*   sessionStorage.removeItem(key)<\/code>: Belirtilen anahtara sahip \u00f6\u011feyi sessionStorage<\/code>‘dan siler.
\n*   sessionStorage.clear()<\/code>: sessionStorage<\/code>‘daki t\u00fcm \u00f6\u011feleri siler.
\n*   sessionStorage.key(index)<\/code>: Belirtilen dizindeki anahtar\u0131n ad\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.
\n*   sessionStorage.length<\/code>: sessionStorage<\/code>‘daki depolanm\u0131\u015f \u00f6\u011felerin say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\u00d6rnek Kullan\u0131m<\/h4>\n
A\u015fa\u011f\u0131daki JavaScript kod \u00f6rnekleri, sessionStorage<\/code>‘\u0131n temel metotlar\u0131n\u0131 g\u00f6stermektedir:<\/p>\n
\/\/ 1. Veri Kaydetme (setItem)\nsessionStorage.setItem('formAdim1Verileri', '{\"ad\":\"Deniz\", \"soyad\":\"Y\u0131lmaz\"}');\nsessionStorage.setItem('geciciMesaj', 'Ho\u015f geldiniz! Bu mesaj sadece bu oturum i\u00e7in ge\u00e7erlidir.');\n\nconsole.log('Session verileri kaydedildi.');\n\n\/\/ 2. Veri Okuma (getItem)\nconst formVerileriJSON = sessionStorage.getItem('formAdim1Verileri');\nif (formVerileriJSON) {\n  const formVerileriObjesi = JSON.parse(formVerileriJSON);\n  console.log('Kaydedilen form verileri:', formVerileriObjesi);\n  console.log('Ad:', formVerileriObjesi.ad); \/\/ \u00c7\u0131kt\u0131: Deniz\n}\n\nconst geciciMesaj = sessionStorage.getItem('geciciMesaj');\nconsole.log('Ge\u00e7ici mesaj:', geciciMesaj);\n\n\/\/ 3. Veri Silme (removeItem)\nsessionStorage.removeItem('geciciMesaj');\nconsole.log('Ge\u00e7ici mesaj silindi.');\n\nconst mesajTekrarKontrol = sessionStorage.getItem('geciciMesaj');\nconsole.log('Ge\u00e7ici mesaj (silindikten sonra):', mesajTekrarKontrol); \/\/ \u00c7\u0131kt\u0131: null\n\n\/\/ 4. T\u00fcm Verileri Silme (clear)\n\/\/ Dikkat: Bu i\u015flem o sekmedeki t\u00fcm sessionStorage verilerini siler!\n\/\/ sessionStorage.clear();\n\/\/ console.log('T\u00fcm sessionStorage verileri silindi.');\n\n\/\/ 5. Anahtar Ad\u0131na ve Uzunlu\u011funa Eri\u015fim\nconsole.log('Depolanan \u00f6\u011fe say\u0131s\u0131:', sessionStorage.length);\n\nfor (let i = 0; i < sessionStorage.length; i++) {\n  const key = sessionStorage.key(i);\n  const value = sessionStorage.getItem(key);\n  console.log(Anahtar: ${key}, De\u011fer: ${value}<\/code>);\n}<\/code><\/pre>\n
S\u0131n\u0131rlamalar ve Dikkat Edilmesi Gerekenler<\/h4>\n
sessionStorage<\/code>, localStorage<\/code> ile benzer s\u0131n\u0131rlamalara sahiptir:<\/p>\n
*   Sadece String Depolama:<\/strong> T\u0131pk\u0131 localStorage<\/code> gibi, sessionStorage<\/code> da sadece dize (string) verileri depolayabilir. Di\u011fer veri t\u00fcrleri i\u00e7in JSON.stringify()<\/code> ve JSON.parse()<\/code> kullan\u0131lmal\u0131d\u0131r.
\n*   Senkron \u00c7al\u0131\u015fma:<\/strong> \u0130\u015flemler senkrondur ve ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke edebilir.
\n*   G\u00fcvenlik Endi\u015feleri (XSS):<\/strong> sessionStorage<\/code>‘daki verilere de JavaScript arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir. XSS sald\u0131r\u0131lar\u0131, sessionStorage<\/code>‘daki verileri \u00e7alabilir. Bu nedenle, hassas veriler burada da saklanmamal\u0131d\u0131r.
\n*   Veri B\u00fct\u00fcnl\u00fc\u011f\u00fc:<\/strong> Kullan\u0131c\u0131 taraf\u0131ndan de\u011fi\u015ftirilebilir, bu y\u00fczden kritik uygulama mant\u0131\u011f\u0131na temel olu\u015fturmamal\u0131d\u0131r.
\n*   Depolama Limitleri:<\/strong> Genellikle 5-10 MB aras\u0131nda bir depolama limiti vard\u0131r.<\/p>\n
sessionStorage<\/code>‘\u0131n temel g\u00fcc\u00fc, verilerin sadece belirli bir oturum i\u00e7in ge\u00e7erli olmas\u0131d\u0131r, bu da ge\u00e7ici ve oturuma \u00f6zel veri y\u00f6netimi i\u00e7in idealdir.<\/p>\n
localStorage ve sessionStorage Aras\u0131ndaki Temel Farklar<\/h3>\n
localStorage<\/code> ve sessionStorage<\/code> ayn\u0131 Web Storage API’sinin par\u00e7alar\u0131 olup, ayn\u0131 metod setini kullanmalar\u0131na ra\u011fmen, aralar\u0131ndaki temel farklar kullan\u0131m senaryolar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler. \u0130\u015fte bu iki mekanizma aras\u0131ndaki ana farkl\u0131l\u0131klar:<\/p>\n
| \u00d6zellik        | localStorage                                    | sessionStorage                                 |
\n| :————- | :———————————————- | :——————————————— |
\n| Kal\u0131c\u0131l\u0131k<\/strong>  | Veriler kal\u0131c\u0131d\u0131r. Taray\u0131c\u0131 kapat\u0131lsa veya bilgisayar yeniden ba\u015flat\u0131lsa bile silinmez. Kullan\u0131c\u0131 veya JavaScript taraf\u0131ndan a\u00e7\u0131k\u00e7a silinene kadar kal\u0131r. | Veriler oturum bazl\u0131d\u0131r. Taray\u0131c\u0131 sekmesi\/penceresi kapat\u0131ld\u0131\u011f\u0131nda veya taray\u0131c\u0131 tamamen kapat\u0131ld\u0131\u011f\u0131nda silinir. |
\n| Kapsam<\/strong>     | Ayn\u0131 k\u00f6kenden (domain) t\u00fcm sekmeler ve pencereler aras\u0131nda payla\u015f\u0131l\u0131r. Bir sekmede kaydedilen veri, di\u011fer sekmede eri\u015filebilir. | Sadece veriyi olu\u015fturan sekme veya pencere i\u00e7in ge\u00e7erlidir. Farkl\u0131 bir sekmede veya pencerede ayn\u0131 site a\u00e7\u0131lsa bile, o sekme i\u00e7in yeni ve bo\u015f bir sessionStorage<\/code> alan\u0131 olu\u015fturulur. |
\n| \u00d6m\u00fcr<\/strong>       | S\u00fcresiz (persists indefinitely)                 | Oturum s\u00fcresince (until tab\/window is closed)  |
\n| Kullan\u0131m Alan\u0131<\/strong> | Kullan\u0131c\u0131 tercihleri, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekler, kal\u0131c\u0131 al\u0131\u015fveri\u015f sepeti, uzun s\u00fcreli oturum bilgileri. | \u00c7ok ad\u0131ml\u0131 form verileri, oturuma \u00f6zel filtreler\/s\u0131ralamalar, ge\u00e7ici kullan\u0131c\u0131 girdileri, tek oturumluk al\u0131\u015fveri\u015f sepeti. |
\n| Eri\u015fim<\/strong>     | window.localStorage<\/code> objesi \u00fczerinden            | window.sessionStorage<\/code> objesi \u00fczerinden         |<\/p>\n
Bu farkl\u0131l\u0131klar, bir web uygulamas\u0131nda hangi depolama mekanizmas\u0131n\u0131n kullan\u0131laca\u011f\u0131na karar verirken anahtar rol oynar. Kal\u0131c\u0131 ve domain genelinde payla\u015f\u0131lan verilere ihtiyac\u0131n\u0131z varsa localStorage<\/code>, yaln\u0131zca mevcut oturum ve sekme i\u00e7in ge\u00e7erli ge\u00e7ici verilere ihtiyac\u0131n\u0131z varsa sessionStorage<\/code> tercih edilmelidir.<\/p>\n
Web Storage API G\u00fcvenli\u011fi<\/h3>\n
Web Storage API’si (hem localStorage<\/code> hem de sessionStorage<\/code>), istemci taraf\u0131nda veri depolama i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 bir mekanizma sunsa da, g\u00fcvenlik hususlar\u0131 g\u00f6z ard\u0131 edilmemelidir. \u00d6zellikle hassas verilerin depolanmas\u0131 konusunda dikkatli olunmal\u0131d\u0131r.<\/p>\n
XSS Sald\u0131r\u0131lar\u0131 ve \u00d6nlemler<\/h4>\n
Web Storage’da depolanan verilere JavaScript arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015filebilir. Bu durum, siteler aras\u0131 komut \u00e7al\u0131\u015ft\u0131rma (XSS) sald\u0131r\u0131lar\u0131 i\u00e7in bir risk olu\u015fturur. Bir XSS sald\u0131r\u0131s\u0131nda, k\u00f6t\u00fc niyetli bir \u00fc\u00e7\u00fcnc\u00fc taraf, web sitenize zararl\u0131 JavaScript kodu enjekte edebilir. Bu kod, localStorage<\/code> veya sessionStorage<\/code>‘daki t\u00fcm verilere eri\u015febilir ve bunlar\u0131 sald\u0131rgan\u0131n kontrol\u00fcndeki bir sunucuya g\u00f6nderebilir.<\/p>\n
\u00d6nlemler:<\/strong><\/p>\n
*   Asla Hassas Bilgiler Depolamay\u0131n:<\/strong> \u015eifreler, kredi kart\u0131 numaralar\u0131, ki\u015fisel kimlik numaralar\u0131, oturum \u00e7erezleri (cookie-based session IDs) gibi son derece hassas verileri localStorage<\/code> veya sessionStorage<\/code>‘da depolamaktan ka\u00e7\u0131n\u0131n. Bu t\u00fcr veriler i\u00e7in her zaman sunucu taraf\u0131nda g\u00fcvenli oturum y\u00f6netimi veya \u015fifreleme y\u00f6ntemleri kullan\u0131lmal\u0131d\u0131r.
\n*   Giri\u015fleri Temizleyin (Sanitize):<\/strong> Kullan\u0131c\u0131 taraf\u0131ndan girilen herhangi bir veriyi taray\u0131c\u0131da depolamadan \u00f6nce veya HTML’ye yans\u0131tmadan \u00f6nce her zaman temizleyin ve do\u011frulay\u0131n. Bu, XSS sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemenin temelidir.
\n*   \u0130\u00e7erik G\u00fcvenlik Politikas\u0131 (CSP):<\/strong> Bir \u0130\u00e7erik G\u00fcvenlik Politikas\u0131 (Content Security Policy) uygulamak, XSS sald\u0131r\u0131lar\u0131n\u0131n etkisini azaltmaya yard\u0131mc\u0131 olabilir. CSP, taray\u0131c\u0131ya hangi kaynaklardan komut dosyalar\u0131n\u0131n, stil sayfalar\u0131n\u0131n ve di\u011fer kaynaklar\u0131n y\u00fcklenebilece\u011fini bildirir.<\/p>\n
Hassas Veri Depolama<\/h4>\n
Daha \u00f6nce de belirtildi\u011fi gibi, localStorage<\/code> ve sessionStorage<\/code> hassas verileri depolamak i\u00e7in uygun yerler de\u011fildir. Veriler taray\u0131c\u0131da d\u00fcz metin olarak saklan\u0131r ve k\u00f6t\u00fc niyetli bir kod veya hatta taray\u0131c\u0131ya fiziksel eri\u015fimi olan bir kullan\u0131c\u0131 taraf\u0131ndan kolayca okunabilir.<\/p>\n
*   Kimlik Do\u011frulama Tokenlar\u0131:<\/strong> JWT (JSON Web Token) gibi kimlik do\u011frulama tokenlar\u0131 localStorage<\/code>‘da depolanabilir, ancak bu bir tart\u0131\u015fma konusudur. E\u011fer depolanacaksa, tokenlar\u0131n k\u0131sa \u00f6m\u00fcrl\u00fc olmas\u0131, her istekte sunucu taraf\u0131nda do\u011frulanmas\u0131 ve refreshToken<\/code> gibi mekanizmalarla desteklenmesi \u00f6nemlidir. Daha g\u00fcvenli bir yakla\u015f\u0131m, HttpOnly<\/code> ve Secure<\/code> bayraklar\u0131na sahip \u00e7erezlerde tokenlar\u0131 saklamakt\u0131r, \u00e7\u00fcnk\u00fc bu \u00e7erezlere JavaScript eri\u015femez ve sadece HTTPS \u00fczerinden g\u00f6nderilirler.
\n*   Veri \u015eifreleme:<\/strong> E\u011fer ger\u00e7ekten hassas verileri istemci taraf\u0131nda depolaman\u0131z gerekiyorsa (ki bu genellikle tavsiye edilmez), bu verileri depolamadan \u00f6nce istemci taraf\u0131nda \u015fifrelemeyi d\u00fc\u015f\u00fcnebilirsiniz. Ancak bu, anahtarlar\u0131n y\u00f6netimi ve \u015fifrelemenin do\u011fru bir \u015fekilde uygulanmas\u0131 gibi yeni karma\u015f\u0131kl\u0131klar getirir ve yine de XSS riskini tamamen ortadan kald\u0131rmaz.<\/p>\n
Veri B\u00fct\u00fcnl\u00fc\u011f\u00fc<\/h4>\n
localStorage<\/code> ve sessionStorage<\/code>‘daki veriler, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda depoland\u0131\u011f\u0131 i\u00e7in kullan\u0131c\u0131 taraf\u0131ndan kolayca de\u011fi\u015ftirilebilir. Geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanarak veya do\u011frudan JavaScript konsolu \u00fczerinden bu verilere eri\u015filebilir ve manip\u00fcle edilebilir. Bu nedenle, uygulaman\u0131z\u0131n i\u015f mant\u0131\u011f\u0131n\u0131 veya g\u00fcvenlik kararlar\u0131n\u0131 tamamen bu verilere dayand\u0131rmamal\u0131s\u0131n\u0131z. Her zaman sunucu taraf\u0131nda veri do\u011frulamas\u0131 ve yetkilendirme kontrol\u00fc yap\u0131lmal\u0131d\u0131r.<\/p>\n
\u00d6zetle, Web Storage API’si kolayl\u0131k ve performans sunar, ancak g\u00fcvenlik her zaman \u00f6ncelikli olmal\u0131d\u0131r. Sadece hassas olmayan ve kullan\u0131c\u0131 taraf\u0131ndan manip\u00fcle edilmesinin b\u00fcy\u00fck risk olu\u015fturmayaca\u011f\u0131 verileri depolamak i\u00e7in kullan\u0131lmal\u0131d\u0131r.<\/p>\n
Depolama Limitleri ve Y\u00f6netimi<\/h3>\n
Web Storage API’si, \u00e7erezlere k\u0131yasla \u00f6nemli \u00f6l\u00e7\u00fcde daha b\u00fcy\u00fck bir depolama kapasitesi sunar. Taray\u0131c\u0131ya ve cihaza ba\u011fl\u0131 olarak, localStorage<\/code> ve sessionStorage<\/code> i\u00e7in genellikle 5 MB ila 10 MB aras\u0131nda bir limit bulunur. Bu limit, her k\u00f6ken (origin) i\u00e7in ayr\u0131 ayr\u0131 uygulan\u0131r, yani bir web sitesinin kendi domain’i i\u00e7in bu kadar alana sahip oldu\u011fu anlam\u0131na gelir.<\/p>\n
Limit A\u015f\u0131m\u0131:<\/strong><\/p>\n
E\u011fer bir web uygulamas\u0131, belirlenen depolama limitini a\u015fmaya \u00e7al\u0131\u015f\u0131rsa, taray\u0131c\u0131 bir QuotaExceededError<\/code> hatas\u0131 f\u0131rlatacakt\u0131r. Bu hatay\u0131 yakalamak ve kullan\u0131c\u0131ya uygun bir geri bildirim sa\u011flamak \u00f6nemlidir.<\/p>\n
try {\n  localStorage.setItem('cokBuyukVeri', 'a'.repeat(10  1024 <\/em> 1024)); \/\/ 10MB veri\n} catch (e) {\n  if (e.name === 'QuotaExceededError') {\n    console.error('Depolama alan\u0131 doldu! Daha fazla veri kaydedilemiyor.');\n    \/\/ Kullan\u0131c\u0131ya bilgi ver veya eski verileri temizlemeyi dene\n  } else {\n    console.error('Bir hata olu\u015ftu:', e);\n  }\n}<\/code><\/pre>\n
Depolama Alan\u0131 Y\u00f6netimi:<\/strong><\/p>\n
Web Storage API’si, kullan\u0131lan veya kalan depolama alan\u0131n\u0131 do\u011frudan sorgulamak i\u00e7in yerle\u015fik bir metod sunmaz. Ancak, geli\u015ftiriciler depolama alan\u0131n\u0131 y\u00f6netmek i\u00e7in baz\u0131 stratejiler izleyebilir:<\/p>\n
*   Verimli Veri Saklama:<\/strong> Yaln\u0131zca ger\u00e7ekten gerekli olan verileri depolay\u0131n. B\u00fcy\u00fck JSON nesnelerini s\u0131k\u0131\u015ft\u0131rarak veya sadece kritik alanlar\u0131n\u0131 saklayarak alan\u0131 optimize edebilirsiniz.
\n*   Eski Verileri Temizleme:<\/strong> Uygulaman\u0131z\u0131n art\u0131k ihtiya\u00e7 duymad\u0131\u011f\u0131 eski veya s\u00fcresi dolmu\u015f verileri periyodik olarak removeItem()<\/code> ile temizleyin.
\n*   Alternatif Depolama \u00c7\u00f6z\u00fcmleri:<\/strong> E\u011fer 5-10 MB’tan daha fazla depolama alan\u0131na veya yap\u0131land\u0131r\u0131lm\u0131\u015f veri depolama yetene\u011fine ihtiyac\u0131n\u0131z varsa, IndexedDB gibi daha geli\u015fmi\u015f istemci taraf\u0131 veritabanlar\u0131n\u0131 d\u00fc\u015f\u00fcnmelisiniz. IndexedDB, \u00e7ok daha b\u00fcy\u00fck veri k\u00fcmelerini (genellikle GB’larca) ve karma\u015f\u0131k sorgular\u0131 destekler.<\/p>\n
Depolama limitleri, \u00e7o\u011fu k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulama i\u00e7in yeterli olsa da, b\u00fcy\u00fck \u00f6l\u00e7ekli \u00e7evrimd\u0131\u015f\u0131 uygulamalar veya \u00e7ok miktarda kullan\u0131c\u0131 verisi depolayan uygulamalar i\u00e7in dikkatle y\u00f6netilmesi gereken bir fakt\u00f6rd\u00fcr.<\/p>\n
Web Storage API’nin Alternatifleri<\/h3>\n
localStorage<\/code> ve sessionStorage<\/code> bir\u00e7ok kullan\u0131m senaryosu i\u00e7in ideal \u00e7\u00f6z\u00fcmler olsa da, t\u00fcm istemci taraf\u0131 depolama ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamazlar. Web platformu, farkl\u0131 gereksinimlere y\u00f6nelik ba\u015fka depolama mekanizmalar\u0131 da sunar.<\/p>\n
Cookies (\u00c7erezler)<\/h4>\n
*   Tekrar Ziyaret:<\/strong> \u00c7erezler, sunucuya yap\u0131lan her HTTP iste\u011fiyle birlikte otomatik olarak g\u00f6nderildi\u011fi i\u00e7in, \u00f6zellikle sunucu taraf\u0131nda oturum y\u00f6netimi veya kullan\u0131c\u0131 takibi i\u00e7in hala kullan\u0131l\u0131rlar.
\n*   Boyut ve G\u00fcvenlik:<\/strong> 4 KB’l\u0131k k\u00fc\u00e7\u00fck boyutlar\u0131 ve her istekte g\u00f6nderilmeleri nedeniyle b\u00fcy\u00fck miktarda veri depolamak veya performans odakl\u0131 senaryolar i\u00e7in uygun de\u011fildirler. HttpOnly<\/code> ve Secure<\/code> bayraklar\u0131 ile XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha g\u00fcvenli hale getirilebilirler.
\n*   Kullan\u0131m Alan\u0131:<\/strong> Oturum ID’leri, kullan\u0131c\u0131 kimlik do\u011frulama tokenlar\u0131 (g\u00fcvenli bir \u015fekilde), A\/B testi gruplar\u0131 gibi sunucu-istemci etkile\u015fimi gerektiren k\u00fc\u00e7\u00fck veriler.<\/p>\n
IndexedDB<\/h4>\n
*   Yap\u0131land\u0131r\u0131lm\u0131\u015f ve B\u00fcy\u00fck Veri:<\/strong> IndexedDB, taray\u0131c\u0131da b\u00fcy\u00fck miktarda yap\u0131land\u0131r\u0131lm\u0131\u015f veri depolamak i\u00e7in tasarlanm\u0131\u015f, d\u00fc\u015f\u00fck seviyeli bir API’dir. \u0130li\u015fkisel veritabanlar\u0131na benzer bir nesne tabanl\u0131 veritaban\u0131 sistemidir.
\n*   Asenkron:<\/strong> T\u00fcm i\u015flemleri asenkrondur, bu da ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n bloke olmamas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131l\u0131\u011f\u0131n\u0131 korur.
\n*   Kullan\u0131m Alan\u0131:<\/strong> \u00c7evrimd\u0131\u015f\u0131 uygulamalar, b\u00fcy\u00fck miktarda kullan\u0131c\u0131 verisi (\u00f6rne\u011fin, e-posta istemcisi, not uygulamas\u0131), karma\u015f\u0131k veri sorgulama gerektiren uygulamalar.
\n*   Karma\u015f\u0131kl\u0131k:<\/strong> Web Storage’a g\u00f6re \u00e7ok daha karma\u015f\u0131k bir API’ye sahiptir ve \u00f6\u011frenme e\u011frisi daha diktir. Genellikle IndexedDB’yi kolayla\u015ft\u0131ran k\u00fct\u00fcphaneler (\u00f6rne\u011fin Dexie.js) kullan\u0131l\u0131r.<\/p>\n
Cache API (Service Workers ile)<\/h4>\n
*   A\u011f Kaynaklar\u0131 \u00d6nbellekleme:<\/strong> Cache API, Service Worker’lar arac\u0131l\u0131\u011f\u0131yla web uygulamas\u0131n\u0131n a\u011f isteklerini (HTML, CSS, JavaScript dosyalar\u0131, g\u00f6rseller vb.) \u00f6nbelle\u011fe almas\u0131n\u0131 sa\u011flar. Bu, \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fma ve uygulaman\u0131n y\u00fckleme h\u0131z\u0131n\u0131 art\u0131rmak i\u00e7in kritik \u00f6neme sahiptir.
\n*   Programlanabilir \u00d6nbellek:<\/strong> Geli\u015ftiricilere, a\u011f isteklerini nas\u0131l ele alacaklar\u0131 (\u00f6nbellekten mi sunulacak, a\u011fdan m\u0131 \u00e7ekilecek vb.) \u00fczerinde tam kontrol sa\u011flar.
\n*   Kullan\u0131m Alan\u0131:<\/strong> Progresif Web Uygulamalar\u0131 (PWA), \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme, statik kaynaklar\u0131n h\u0131zl\u0131 sunumu.<\/p>\n
Application Cache (Uygulama \u00d6nbelle\u011fi – Kullan\u0131mdan Kald\u0131r\u0131ld\u0131)<\/h4>\n
*   Ge\u00e7mi\u015f:<\/strong> HTML5 ile tan\u0131t\u0131lan ancak karma\u015f\u0131kl\u0131\u011f\u0131, g\u00fcvenilirlik sorunlar\u0131 ve esneklik eksikli\u011fi nedeniyle b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kullan\u0131mdan kald\u0131r\u0131lm\u0131\u015f (deprecated) bir teknolojidir.
\n*   Yerine Ge\u00e7en:<\/strong> Cache API ve Service Worker’lar taraf\u0131ndan tamamen ikame edilmi\u015ftir.<\/p>\n
\u00d6zetle, localStorage<\/code> ve sessionStorage<\/code> basit anahtar-de\u011fer depolama ihtiya\u00e7lar\u0131 i\u00e7in harikad\u0131r. Daha karma\u015f\u0131k ve b\u00fcy\u00fck \u00f6l\u00e7ekli veri depolama i\u00e7in IndexedDB, a\u011f kaynaklar\u0131n\u0131 \u00e7evrimd\u0131\u015f\u0131 hale getirmek i\u00e7in ise Cache API ve Service Worker’lar en iyi se\u00e7eneklerdir. Do\u011fru arac\u0131 se\u00e7mek, uygulaman\u0131z\u0131n performans\u0131n\u0131, g\u00fcvenli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini etkileyecektir.<\/p>\n
En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
localStorage<\/code> ve sessionStorage<\/code>‘\u0131 etkin ve g\u00fcvenli bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 ve ipu\u00e7lar\u0131n\u0131 takip etmek \u00f6nemlidir:<\/p>\n
*   Hata Y\u00f6netimi (Try-Catch Bloklar\u0131):<\/strong> Web Storage i\u015flemleri her zaman ba\u015far\u0131l\u0131 olmayabilir. Kullan\u0131c\u0131, taray\u0131c\u0131s\u0131n\u0131 “gizli modda” kullan\u0131yor olabilir (bu durumda depolama kotas\u0131 \u00e7ok k\u00fc\u00e7\u00fck veya hi\u00e7 olmayabilir) veya depolama alan\u0131 dolmu\u015f olabilir. Bu durumlar\u0131 ele almak i\u00e7in her zaman try-catch<\/code> bloklar\u0131 kullan\u0131n:<\/p>\n
try {\n      localStorage.setItem('myKey', 'myValue');\n    } catch (e) {\n      if (e.name === 'QuotaExceededError') {\n        console.error('Depolama alan\u0131 doldu veya gizli modda eri\u015fim k\u0131s\u0131tl\u0131.');\n      } else {\n        console.error('Web Storage hatas\u0131:', e);\n      }\n    }<\/code><\/pre>\n
*   Anahtarlar\u0131 \u00d6n Eklerle Belirleme (Prefixing Keys):<\/strong> \u00d6zellikle b\u00fcy\u00fck uygulamalarda veya farkl\u0131 mod\u00fcllerin veri depolad\u0131\u011f\u0131 durumlarda, anahtar adland\u0131rma \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek i\u00e7in anahtarlar\u0131n\u0131za bir \u00f6n ek (prefix) ekleyin.<\/p>\n
localStorage.setItem('myapp_user_id', '123');\n    localStorage.setItem('myapp_settings_theme', 'dark');<\/code><\/pre>\n
*   JSON ile Nesne Depolama:<\/strong> localStorage<\/code> ve sessionStorage<\/code> sadece string depolayabildi\u011fi i\u00e7in, karma\u015f\u0131k JavaScript nesnelerini veya dizilerini depolarken JSON.stringify()<\/code> kullanarak dizeye d\u00f6n\u00fc\u015ft\u00fcr\u00fcn ve al\u0131rken JSON.parse()<\/code> kullanarak orijinal haline getirin.<\/p>\n
const user = { name: 'Ay\u015fe', age: 30 };\n    localStorage.setItem('userProfile', JSON.stringify(user));\n\n    const storedUser = JSON.parse(localStorage.getItem('userProfile'));\n    console.log(storedUser.name);<\/code><\/pre>\n
*   Hassas Verileri Depolamaktan Ka\u00e7\u0131n\u0131n:<\/strong> \u015eifreler, kredi kart\u0131 bilgileri, ki\u015fisel kimlik numaralar\u0131 gibi hassas verileri asla Web Storage’da saklamay\u0131n. XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131zd\u0131rlar.
\n*   Veri B\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc G\u00f6z \u00d6n\u00fcnde Bulundurun:<\/strong> localStorage<\/code> ve sessionStorage<\/code>‘daki veriler istemci taraf\u0131ndan kolayca de\u011fi\u015ftirilebilir. Uygulaman\u0131z\u0131n kritik mant\u0131\u011f\u0131n\u0131 bu verilere tamamen dayand\u0131rmay\u0131n ve sunucu taraf\u0131nda her zaman do\u011frulama yap\u0131n.
\n*   storage<\/code> Olay\u0131n\u0131 Kullanma (localStorage i\u00e7in):<\/strong> localStorage<\/code>‘da bir de\u011fi\u015fiklik oldu\u011funda (ayn\u0131 k\u00f6kenden farkl\u0131 bir sekmede bile), window.onstorage<\/code> olay\u0131 tetiklenir. Bu olay, sekmeler aras\u0131 ileti\u015fimi sa\u011flamak veya verilerin g\u00fcncellendi\u011fini di\u011fer sekmelere bildirmek i\u00e7in kullan\u0131labilir. sessionStorage<\/code> i\u00e7in bu olay tetiklenmez \u00e7\u00fcnk\u00fc veriler sekme bazl\u0131d\u0131r.<\/p>\n
window.addEventListener('storage', (event) => {\n      if (event.key === 'myapp_settings_theme') {\n        console.log('Tema ayar\u0131 de\u011fi\u015fti:', event.newValue);\n        \/\/ Sayfay\u0131 yeni temaya g\u00f6re g\u00fcncelle\n      }\n    });<\/code><\/pre>\n
*   Kullan\u0131c\u0131ya Bilgi Verme:<\/strong> Uygulaman\u0131z\u0131n neden veri depolad\u0131\u011f\u0131n\u0131 ve bu verilerin ne i\u00e7in kullan\u0131ld\u0131\u011f\u0131n\u0131 (\u00f6rne\u011fin, ki\u015fiselle\u015ftirme veya \u00e7evrimd\u0131\u015f\u0131 i\u015flevsellik i\u00e7in) kullan\u0131c\u0131lara \u015feffaf bir \u015fekilde a\u00e7\u0131klay\u0131n. GDPR gibi gizlilik d\u00fczenlemelerine uyum sa\u011flamak \u00f6nemlidir.
\n*   D\u00fczenli Temizleme:<\/strong> Uygulaman\u0131z\u0131n art\u0131k ihtiya\u00e7 duymad\u0131\u011f\u0131 eski veya ge\u00e7ersiz verileri d\u00fczenli olarak temizleyerek depolama alan\u0131n\u0131 verimli kullan\u0131n.<\/p>\n
Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, Web Storage API’sinin avantajlar\u0131ndan tam olarak yararlan\u0131rken olas\u0131 riskleri en aza indirebilirsiniz.<\/p>\n
Sonu\u00e7<\/h3>\n
localStorage<\/code> ve sessionStorage<\/code>, modern web uygulamalar\u0131n\u0131n istemci taraf\u0131nda veri depolama ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamak i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc ve esnek ara\u00e7lard\u0131r. \u00c7erezlerin s\u0131n\u0131rlamalar\u0131n\u0131 a\u015farak, daha b\u00fcy\u00fck depolama kapasitesi, daha basit bir API ve sunucuya gereksiz veri g\u00f6nderimi yapmama gibi \u00f6nemli avantajlar sunarlar.<\/p>\n
localStorage<\/code><\/strong>, verilerin kal\u0131c\u0131 olarak saklanmas\u0131n\u0131 sa\u011flayarak kullan\u0131c\u0131 tercihleri, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekler ve uzun s\u00fcreli oturum bilgileri gibi senaryolar i\u00e7in idealdir. Taray\u0131c\u0131 kapat\u0131lsa bile veriler kaybolmaz ve ayn\u0131 k\u00f6kenden t\u00fcm sekmeler aras\u0131nda payla\u015f\u0131labilir.<\/p>\n
sessionStorage<\/code><\/strong> ise, verilerin yaln\u0131zca mevcut taray\u0131c\u0131 oturumu (sekme\/pencere) boyunca ge\u00e7erli olmas\u0131n\u0131 sa\u011flayarak \u00e7ok ad\u0131ml\u0131 formlar, ge\u00e7ici kullan\u0131c\u0131 girdileri ve oturuma \u00f6zel aray\u00fcz durumlar\u0131 gibi ge\u00e7ici veri depolama ihtiya\u00e7lar\u0131 i\u00e7in m\u00fckemmeldir. Sekme kapat\u0131ld\u0131\u011f\u0131nda veriler silinir ve farkl\u0131 sekmeler aras\u0131nda payla\u015f\u0131lmaz.<\/p>\n
Her iki mekanizma da setItem<\/code>, getItem<\/code>, removeItem<\/code> ve clear<\/code> gibi ayn\u0131 basit metod setini kullan\u0131r ve sadece string verileri depolayabilirler. Bu nedenle, nesnelerin JSON.stringify()<\/code> ve JSON.parse()<\/code> ile d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi gereklidir.<\/p>\n
Ancak, Web Storage API’si kullan\u0131l\u0131rken g\u00fcvenlik hususlar\u0131 asla g\u00f6z ard\u0131 edilmemelidir. \u00d6zellikle XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olduklar\u0131 i\u00e7in, \u015fifreler veya kredi kart\u0131 bilgileri gibi hassas veriler asla localStorage<\/code> veya sessionStorage<\/code>‘da saklanmamal\u0131d\u0131r. Verilerin kullan\u0131c\u0131 taraf\u0131ndan manip\u00fcle edilebilece\u011fi ger\u00e7e\u011fi de dikkate al\u0131nmal\u0131 ve sunucu taraf\u0131nda her zaman do\u011frulama yap\u0131lmal\u0131d\u0131r.<\/p>\n
Sonu\u00e7 olarak, localStorage<\/code> ve sessionStorage<\/code>, do\u011fru kullan\u0131ld\u0131\u011f\u0131nda web uygulamalar\u0131n\u0131n performans\u0131n\u0131, kullan\u0131c\u0131 deneyimini ve i\u015flevselli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran de\u011ferli ara\u00e7lard\u0131r. Geli\u015ftiricilerin, uygulaman\u0131n ihtiya\u00e7lar\u0131na en uygun depolama mekanizmas\u0131n\u0131 se\u00e7erken kal\u0131c\u0131l\u0131k, kapsam, g\u00fcvenlik ve depolama limitleri gibi fakt\u00f6rleri dikkatlice de\u011ferlendirmesi, ba\u015far\u0131l\u0131 ve g\u00fcvenli bir web uygulamas\u0131 geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Daha karma\u015f\u0131k depolama ihtiya\u00e7lar\u0131 i\u00e7in IndexedDB veya \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme i\u00e7in Cache API gibi alternatifler de g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131\nWeb uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37703","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nlocalStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131\" \/>\n<meta property=\"og:description\" content=\"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 Web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-12T21:41:08+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131\",\"datePublished\":\"2026-01-12T21:41:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\"},\"wordCount\":4789,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\",\"name\":\"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-12T21:41:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/","og_locale":"tr_TR","og_type":"article","og_title":"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131","og_description":"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 Web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek","og_url":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-12T21:41:08+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"27 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131","datePublished":"2026-01-12T21:41:08+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/"},"wordCount":4789,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/","url":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/","name":"localStorage ve sessionStorage'a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-12T21:41:08+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/localstorage-ve-sessionstoragea-giris-web-tarayicisinda-veri-depolama-mekanizmalari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"localStorage ve sessionStorage’a Giri\u015f: Web Taray\u0131c\u0131s\u0131nda Veri Depolama Mekanizmalar\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37703"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37703\/revisions"}],"predecessor-version":[{"id":37704,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37703\/revisions\/37704"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}