{"id":34180,"date":"2025-11-12T10:31:08","date_gmt":"2025-11-12T07:31:08","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/localstorage-nedir-ve-neden-her-frontend-gelistiricisi-bilmeli\/"},"modified":"2025-11-12T10:31:08","modified_gmt":"2025-11-12T07:31:08","slug":"localstorage-nedir-ve-neden-her-frontend-gelistiricisi-bilmeli","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/localstorage-nedir-ve-neden-her-frontend-gelistiricisi-bilmeli\/","title":{"rendered":"localStorage Nedir ve Neden Her Frontend Geli\u015ftiricisi Bilmeli?"},"content":{"rendered":"
localStorage: Taray\u0131c\u0131da Veri Saklaman\u0131n En Basit Yolu<\/div>\n

Web uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek, performans\u0131 art\u0131rmak veya basit veri saklama ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131lamak istedi\u011finizde akl\u0131n\u0131za ilk ne gelir? Kullan\u0131c\u0131 tercihlerini hat\u0131rlamak, sepet bilgilerini kaydetmek veya \u00e7evrimd\u0131\u015f\u0131 kullan\u0131m i\u00e7in baz\u0131 verileri depolamak, modern web uygulamalar\u0131n\u0131n olmazsa olmaz\u0131d\u0131r. \u0130\u015fte tam bu noktada, localStorage<\/code><\/a> devreye giriyor. Bir\u00e7ok front-end geli\u015ftiricisinin g\u00f6z ard\u0131 etmemesi gereken, basit ancak g\u00fc\u00e7l\u00fc bu taray\u0131c\u0131 \u00f6zelli\u011fi, kullan\u0131c\u0131 tarafl\u0131 veri depolama konusunda en eri\u015filebilir \u00e7\u00f6z\u00fcmlerden biridir. Bu makale, localStorage<\/code>‘\u0131n ne oldu\u011fundan, nas\u0131l kullan\u0131ld\u0131\u011f\u0131na, potansiyel tuzaklar\u0131na ve en iyi uygulamalar\u0131na kadar her \u015feyi ad\u0131m ad\u0131m a\u00e7\u0131klayarak sizi bu konuda usta bir hale getirmeyi hedefliyor. Gelin, taray\u0131c\u0131da veri saklaman\u0131n bu etkili yolunu derinlemesine ke\u015ffedelim.<\/p>\n

Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri, kullan\u0131c\u0131 etkile\u015fimlerini kal\u0131c\u0131 hale getirmektir. Kullan\u0131c\u0131 bir web sitesini ziyaret etti\u011finde, ayarlar\u0131n\u0131 kaydetti\u011finde veya bir \u00fcr\u00fcn\u00fc sepete ekledi\u011finde, bu bilgilerin taray\u0131c\u0131 kapat\u0131lsa veya sayfa yenilense bile korunmas\u0131 beklenir. \u0130\u015fte localStorage<\/code>, tam da bu ihtiyaca cevap veren, taray\u0131c\u0131da kal\u0131c\u0131 olarak veri depolaman\u0131za olanak tan\u0131yan bir istemci tarafl\u0131 depolama mekanizmas\u0131d\u0131r. Basit\u00e7e ifade etmek gerekirse, web sitelerinin kullan\u0131c\u0131lar\u0131n bilgisayarlar\u0131nda k\u00fc\u00e7\u00fck miktarda veri saklamas\u0131na izin veren bir JavaScript API’sidir.<\/p>\n

Peki, localStorage<\/code>‘\u0131 bu kadar \u00f6nemli yapan nedir? \u00d6ncelikle, depolanan veriler kal\u0131c\u0131d\u0131r. Yani kullan\u0131c\u0131 taray\u0131c\u0131s\u0131n\u0131 kapatsa, bilgisayar\u0131n\u0131 yeniden ba\u015flatsa veya internet ba\u011flant\u0131s\u0131 olmasa bile veriler kaybolmaz. Bu \u00f6zellik, sessionStorage<\/code>‘dan farkl\u0131d\u0131r; sessionStorage<\/code>, oturum sona erdi\u011finde (taray\u0131c\u0131 kapat\u0131ld\u0131\u011f\u0131nda) verileri siler. Ayr\u0131ca, localStorage<\/code>‘\u0131n depolama alan\u0131 olduk\u00e7a c\u00f6merttir. Taray\u0131c\u0131ya ve i\u015fletim sistemine ba\u011fl\u0131 olarak 5 MB ile 10 MB aras\u0131nda veri depolayabilir, ki bu bir\u00e7ok basit uygulama i\u00e7in fazlas\u0131yla yeterlidir. Bu kapasite, \u00f6zellikle k\u00fc\u00e7\u00fck kullan\u0131c\u0131 tercihleri, sepet bilgileri veya \u00e7evrimd\u0131\u015f\u0131 eri\u015fim i\u00e7in \u00f6nbellek verileri gibi senaryolar i\u00e7in idealdir.<\/p>\n

localStorage<\/code>‘\u0131n sa\u011flad\u0131\u011f\u0131 bir di\u011fer avantaj, kullan\u0131m kolayl\u0131\u011f\u0131d\u0131r. Anahtar-de\u011fer \u00e7iftleri \u015feklinde \u00e7al\u0131\u015f\u0131r ve veriye eri\u015fmek, de\u011fi\u015ftirmek veya silmek i\u00e7in son derece basit JavaScript metotlar\u0131 sunar. Karma\u015f\u0131k bir veritaban\u0131 kurulumuna veya sunucu taraf\u0131nda ek bir i\u015fleme gerek kalmadan, do\u011frudan istemci taraf\u0131nda \u00e7al\u0131\u015f\u0131r. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve sunucu y\u00fck\u00fcn\u00fc azalt\u0131r. Ayr\u0131ca, t\u00fcm modern taray\u0131c\u0131lar taraf\u0131ndan geni\u015f \u00e7apta desteklenir, bu da uyumluluk sorunlar\u0131 ya\u015fama olas\u0131l\u0131\u011f\u0131n\u0131z\u0131 minimize eder.<\/p>\n

\n Uzman \u0130pucu: localStorage<\/code>, senkron (synchronous) bir API’dir. Bu, her i\u015flemin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etti\u011fi anlam\u0131na gelir. \u00c7ok b\u00fcy\u00fck veri setlerini depolarken veya s\u0131k s\u0131k eri\u015firken dikkatli olunmal\u0131, \u00e7\u00fcnk\u00fc bu durum uygulaman\u0131z\u0131n performans\u0131n\u0131 olumsuz etkileyebilir.\n<\/div>\n

localStorage<\/code>, ayn\u0131 zamanda, web performans\u0131n\u0131 art\u0131rmak i\u00e7in de kullan\u0131labilir. \u00d6rne\u011fin, s\u0131k de\u011fi\u015fmeyen statik i\u00e7erikleri (CSS temalar\u0131, dil paketleri) veya kullan\u0131c\u0131n\u0131n daha \u00f6nceki etkile\u015fimlerinden kaynaklanan bilgileri depolayarak, her sayfa y\u00fcklemesinde sunucudan veri \u00e7ekme ihtiyac\u0131n\u0131 azaltabilirsiniz. Bu da sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r ve genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n

Ancak, localStorage<\/code>‘\u0131n baz\u0131 k\u0131s\u0131tlamalar\u0131 ve dikkat edilmesi gereken noktalar\u0131 da vard\u0131r. \u00d6rne\u011fin, sadece string (metin) verileri saklayabilir. Karma\u015f\u0131k JavaScript objelerini depolamak istedi\u011finizde, onlar\u0131 JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcrmeniz ve geri d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekir. Ayr\u0131ca, t\u00fcm taray\u0131c\u0131 depolama mekanizmalar\u0131 gibi, localStorage<\/code> da XSS (Cross-Site Scripting)<\/a> sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olabilir. Bu nedenle, hassas bilgileri (\u015fifreler, kredi kart\u0131 numaralar\u0131 gibi) localStorage<\/code>‘da saklamaktan ka\u00e7\u0131nmak hayati \u00f6nem ta\u015f\u0131r. Bu g\u00fcvenlik a\u00e7\u0131klar\u0131 ve performans hususlar\u0131, do\u011fru kullan\u0131m senaryolar\u0131n\u0131 belirlemede kritik rol oynar.<\/p>\n

localStorage, sessionStorage ve Cookies Aras\u0131ndaki Farklar Nelerdir?<\/h3>\n

Taray\u0131c\u0131da veri depolaman\u0131n farkl\u0131 yollar\u0131 vard\u0131r ve her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 bulunur. localStorage<\/code>‘\u0131 daha iyi anlamak i\u00e7in, onu di\u011fer pop\u00fcler depolama y\u00f6ntemleri olan sessionStorage<\/code> ve cookies (\u00e7erezler)<\/a> ile kar\u015f\u0131la\u015ft\u0131rmak faydal\u0131 olacakt\u0131r:<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u00d6zellik<\/th>\nlocalStorage<\/th>\nsessionStorage<\/th>\nCookies (\u00c7erezler)<\/th>\n<\/tr>\n<\/thead>\n
Kal\u0131c\u0131l\u0131k<\/td>\nKal\u0131c\u0131 (taray\u0131c\u0131 kapat\u0131lsa da silinmez)<\/td>\nOturum bazl\u0131 (taray\u0131c\u0131 kapat\u0131ld\u0131\u011f\u0131nda silinir)<\/td>\nS\u00fcre sonuna ba\u011fl\u0131 (son kullanma tarihi ile belirlenir)<\/td>\n<\/tr>\n
Kapasite<\/td>\n5 MB – 10 MB aras\u0131<\/td>\n5 MB – 10 MB aras\u0131<\/td>\n4 KB (\u00e7ok daha k\u00fc\u00e7\u00fck)<\/td>\n<\/tr>\n
Eri\u015fim<\/td>\nSadece JavaScript<\/td>\nSadece JavaScript<\/td>\nHem JavaScript hem de HTTP istekleriyle sunucu taraf\u0131na g\u00f6nderilir<\/td>\n<\/tr>\n
Veri Tipi<\/td>\nSadece string (JSON ile objeler)<\/td>\nSadece string (JSON ile objeler)<\/td>\nSadece string<\/td>\n<\/tr>\n
G\u00fcvenlik<\/td>\nXSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z<\/td>\nXSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z<\/td>\nXSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z (HTTPOnly ile azalt\u0131labilir)<\/td>\n<\/tr>\n
Kullan\u0131m Alan\u0131<\/td>\nKullan\u0131c\u0131 tercihleri, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellek, sepet bilgileri<\/td>\nTek oturumluk veri, form verileri, oturum bazl\u0131 kullan\u0131c\u0131 deneyimi<\/td>\nOturum y\u00f6netimi, kullan\u0131c\u0131 takibi, k\u00fc\u00e7\u00fck \u00e7apl\u0131 ki\u015fiselle\u015ftirme<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Bu tabloya bak\u0131ld\u0131\u011f\u0131nda, localStorage<\/code>‘\u0131n kal\u0131c\u0131l\u0131\u011f\u0131 ve geni\u015f depolama kapasitesiyle \u00f6ne \u00e7\u0131kt\u0131\u011f\u0131 g\u00f6r\u00fcl\u00fcrken, cookies<\/code>‘in ise sunucuya veri g\u00f6nderme yetene\u011fiyle farkl\u0131la\u015ft\u0131\u011f\u0131 anla\u015f\u0131lmaktad\u0131r. sessionStorage<\/code> ise daha \u00e7ok ge\u00e7ici, tek oturumluk veri depolama i\u00e7in idealdir. Her bir arac\u0131n kendi spesifik kullan\u0131m senaryosu oldu\u011funu unutmamak, do\u011fru karar\u0131 vermenin anahtar\u0131d\u0131r.<\/p>\n

localStorage Nas\u0131l Kullan\u0131l\u0131r: Temel Ad\u0131mlar ve Uygulamal\u0131 \u00d6rnekler<\/h2>\n

localStorage<\/code>‘\u0131n kullan\u0131m\u0131 olduk\u00e7a basittir ve birka\u00e7 temel metot etraf\u0131nda d\u00f6ner. Bu metotlar sayesinde taray\u0131c\u0131da veri depolayabilir, depolanan verilere eri\u015febilir, onlar\u0131 g\u00fcncelleyebilir veya silebilirsiniz. Temel olarak, localStorage<\/code> nesnesi \u00fczerinde i\u015flem yapar\u0131z. JavaScript’in window<\/code> nesnesinin bir \u00f6zelli\u011fidir, bu nedenle do\u011frudan localStorage.setItem()<\/code> gibi \u00e7a\u011fr\u0131lar yapabiliriz.<\/p>\n

Veri Depolama: setItem() Metodu<\/h3>\n

Bir anahtar-de\u011fer \u00e7iftini localStorage<\/code>‘a kaydetmek i\u00e7in setItem()<\/code> metodunu kullan\u0131r\u0131z. Bu metot iki arg\u00fcman al\u0131r: bir anahtar (key) ve bir de\u011fer (value). Her ikisi de string format\u0131nda olmal\u0131d\u0131r.<\/p>\n

\nlocalStorage.setItem('kullaniciAdi', 'Ahmet Y\u0131lmaz');\nlocalStorage.setItem('tercihEdilenTema', 'dark');\nconsole.log('Veriler localStorage\\'a kaydedildi.');\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, 'kullaniciAdi' anahtar\u0131na 'Ahmet Y\u0131lmaz' de\u011ferini, 'tercihEdilenTema' anahtar\u0131na ise 'dark' de\u011ferini atad\u0131k. Art\u0131k bu veriler, taray\u0131c\u0131 kapat\u0131lsa bile kal\u0131c\u0131 olarak depolanm\u0131\u015ft\u0131r.<\/p>\n
Veriye Eri\u015fim: getItem() Metodu<\/h3>\n
Depolanan bir veriyi geri almak i\u00e7in getItem()<\/code> metodunu kullan\u0131r\u0131z. Bu metot, sadece anahtar arg\u00fcman\u0131n\u0131 al\u0131r ve ilgili anahtara ait string de\u011feri d\u00f6nd\u00fcr\u00fcr. E\u011fer belirtilen anahtar mevcut de\u011filse, null<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\nlet kullanici = localStorage.getItem('kullaniciAdi');\nlet tema = localStorage.getItem('tercihEdilenTema');\nlet olmayanVeri = localStorage.getItem('yokolanVeri'); \/\/ null d\u00f6necektir\n\nconsole.log('Kullan\u0131c\u0131 Ad\u0131:', kullanici); \/\/ Ahmet Y\u0131lmaz\nconsole.log('Tercih Edilen Tema:', tema);   \/\/ dark\nconsole.log('Olmayan Veri:', olmayanVeri); \/\/ null\n<\/pre>\n
<\/code><\/p>\n
getItem()<\/code> metodu ile al\u0131nan veriler her zaman string format\u0131ndad\u0131r. Bu nedenle, say\u0131sal de\u011ferler veya boolean (do\u011fru\/yanl\u0131\u015f) de\u011ferler depolad\u0131\u011f\u0131n\u0131zda, onlar\u0131 gerekti\u011finde uygun veri tipine d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekebilir.<\/p>\n
Veri Silme: removeItem() Metodu<\/h3>\n
Belirli bir anahtara ait veriyi localStorage<\/code>'dan silmek i\u00e7in removeItem()<\/code> metodunu kullan\u0131r\u0131z. Bu metot sadece silinecek verinin anahtar\u0131n\u0131 arg\u00fcman olarak al\u0131r.<\/p>\n
\nlocalStorage.removeItem('tercihEdilenTema');\nconsole.log('Tercih edilen tema bilgisi silindi.');\n\nlet temaSilindiMi = localStorage.getItem('tercihEdilenTema');\nconsole.log('Tema bilgisi (silindikten sonra):', temaSilindiMi); \/\/ null\n<\/pre>\n
<\/code><\/p>\n
T\u00fcm Verileri Temizleme: clear() Metodu<\/h3>\n
localStorage<\/code>'daki t\u00fcm anahtar-de\u011fer \u00e7iftlerini silmek isterseniz, clear()<\/code> metodunu kullanabilirsiniz. Bu, ilgili alan ad\u0131n\u0131n (domain) t\u00fcm localStorage<\/code> verisini temizleyecektir. Dikkatli kullan\u0131lmas\u0131 gereken bir metottur, \u00e7\u00fcnk\u00fc geri al\u0131namaz bir i\u015flemdir.<\/p>\n
\nlocalStorage.clear();\nconsole.log('T\u00fcm localStorage verileri temizlendi.');\n\nlet kullaniciSonKontrol = localStorage.getItem('kullaniciAdi');\nconsole.log('Kullan\u0131c\u0131 ad\u0131 (t\u00fcm veriler temizlendikten sonra):', kullaniciSonKontrol); \/\/ null\n<\/pre>\n
<\/code><\/p>\n
Anahtarlar\u0131 Listeleme: key() ve length \u00d6zelli\u011fi<\/h3>\n
localStorage<\/code>'da ka\u00e7 tane \u00f6\u011fe oldu\u011funu length<\/code> \u00f6zelli\u011fi ile \u00f6\u011frenebilir, belirli bir indeksteki anahtar\u0131 ise key()<\/code> metodu ile alabilirsiniz. Bu, depolanan t\u00fcm \u00f6\u011feler aras\u0131nda d\u00f6ng\u00fc yapmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\n\/\/ \u00d6rnek veriler ekleyelim\nlocalStorage.setItem('\u00fcr\u00fcn1', 'Laptop');\nlocalStorage.setItem('\u00fcr\u00fcn2', 'Mouse');\n\nconsole.log('Depolanan \u00f6\u011fe say\u0131s\u0131:', localStorage.length); \/\/ 2\n\nfor (let i = 0; i < localStorage.length; i++) {\n  let anahtar = localStorage.key(i);\n  let deger = localStorage.getItem(anahtar);\n  console.log(Anahtar: ${anahtar}, De\u011fer: ${deger}<\/code>);\n}\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Anahtar: \u00fcr\u00fcn1, De\u011fer: Laptop\n\/\/ Anahtar: \u00fcr\u00fcn2, De\u011fer: Mouse\n<\/pre>\n
<\/code><\/p>\n
Karma\u015f\u0131k Objeleri Depolama: JSON.stringify() ve JSON.parse()<\/h3>\n
Daha \u00f6nce de belirtti\u011fimiz gibi, localStorage<\/code> yaln\u0131zca string verileri depolayabilir. Ancak modern web uygulamalar\u0131nda genellikle say\u0131sal de\u011ferler, boolean'lar, diziler veya objeler gibi karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 depolamam\u0131z gerekir. Bu durumda, JavaScript'in yerle\u015fik JSON<\/code> objesini kullan\u0131r\u0131z. Objeleri depolamadan \u00f6nce JSON.stringify()<\/code> ile string'e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, al\u0131rken ise JSON.parse()<\/code> ile tekrar objeye \u00e7eviririz.<\/p>\n
\nlet kullaniciAyarlari = {\n  theme: 'dark',\n  fontSize: 16,\n  notifications: true,\n  lastLogin: new Date()\n};\n\n\/\/ Objeyi string'e d\u00f6n\u00fc\u015ft\u00fcrerek kaydet\nlocalStorage.setItem('ayarlar', JSON.stringify(kullaniciAyarlari));\nconsole.log('Kullan\u0131c\u0131 ayarlar\u0131 string olarak kaydedildi.');\n\n\/\/ String'i tekrar objeye d\u00f6n\u00fc\u015ft\u00fcrerek geri al\nlet kaydedilenAyarlar = JSON.getItem('ayarlar');\nlet ayarlariObje = JSON.parse(kaydedilenAyarlar);\n\nconsole.log('Kaydedilen Ayarlar Objesi:', ayarlariObje);\nconsole.log('Tema:', ayarlariObje.theme);\nconsole.log('Bildirimler:', ayarlariObje.notifications);\n<\/pre>\n
<\/code><\/p>\n
Bu teknik, localStorage<\/code>'\u0131n string k\u0131s\u0131tlamas\u0131n\u0131 a\u015farak, hemen hemen her t\u00fcrden JavaScript verisini depolaman\u0131za olanak tan\u0131r. Ancak, JSON.parse()<\/code> i\u015fleminin hata d\u00f6nd\u00fcrebilece\u011fini unutmay\u0131n; bu nedenle, g\u00fcvenilmeyen kaynaklardan al\u0131nan verileri d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken hata yakalama mekanizmalar\u0131 (try...catch<\/code> bloklar\u0131) kullanmak iyi bir uygulamad\u0131r.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda localStorage: Vaka Analizleri ve Pratik Uygulamalar<\/h2>\n
localStorage<\/code>'\u0131n teorik bilgilerini \u00f6\u011frendik. \u015eimdi s\u0131ra geldi bu bilgileri ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullanabilece\u011fimize, uygulamal\u0131 vaka analizleriyle bu konuyu peki\u015ftirmeye. localStorage<\/code>, g\u00fcnl\u00fck web geli\u015ftirme g\u00f6revlerinde say\u0131s\u0131z f\u0131rsat sunar ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirebilir.<\/p>\n
Vaka Analizi 1: E-ticaret Sitesinde Sepet Bilgilerini Kal\u0131c\u0131 Hale Getirme<\/h3>\n
Bir e-ticaret sitesinde, kullan\u0131c\u0131n\u0131n sepete ekledi\u011fi \u00fcr\u00fcnlerin sayfa yenilense bile hatta taray\u0131c\u0131 kapat\u0131l\u0131p tekrar a\u00e7\u0131lsa bile korunmas\u0131 temel bir beklentidir. \u0130\u015fte localStorage<\/code> burada kritik bir rol oynar. Kullan\u0131c\u0131 sepete bir \u00fcr\u00fcn ekledi\u011finde, sepetin o anki durumunu (\u00fcr\u00fcnler, miktarlar, toplam fiyat vb.) localStorage<\/code>'a kaydedebiliriz. Sayfa y\u00fcklendi\u011finde ise, localStorage<\/code>'dan bu veriyi \u00e7ekerek sepeti eski haline getirebiliriz.<\/p>\n
\n\/\/ Sepet objesi\nlet sepet = [];\n\n\/\/ Sepete \u00fcr\u00fcn ekleme fonksiyonu\nfunction urunEkle(urunId, urunAdi, fiyat, adet) {\n  sepet.push({ id: urunId, ad: urunAdi, fiyat: fiyat, adet: adet });\n  localStorage.setItem('alisverisSepeti', JSON.stringify(sepet)); \/\/ Sepeti localStorage'a kaydet\n  console.log(${urunAdi} sepete eklendi.<\/code>);\n}\n\n\/\/ Sepeti localStorage'dan y\u00fckleme fonksiyonu\nfunction sepetiYukle() {\n  const kaydedilenSepet = localStorage.getItem('alisverisSepeti');\n  if (kaydedilenSepet) {\n    sepet = JSON.parse(kaydedilenSepet);\n    console.log('Sepetiniz y\u00fcklendi:', sepet);\n  } else {\n    console.log('Sepetiniz bo\u015f.');\n  }\n}\n\n\/\/ Sayfa y\u00fcklendi\u011finde sepeti y\u00fckle\nwindow.onload = sepetiYukle;\n\n\/\/ \u00d6rnek kullan\u0131m:\nurunEkle(1, 'Laptop', 12000, 1);\nurunEkle(2, 'Kablosuz Mouse', 250, 2);\n<\/pre>\n
<\/code><\/p>\n
Bu senaryo, kullan\u0131c\u0131 dostu bir al\u0131\u015fveri\u015f deneyimi sunarken, sunucuya her mikro etkile\u015fimde (\u00fcr\u00fcn ekleme\/\u00e7\u0131karma) istek g\u00f6nderme y\u00fck\u00fcn\u00fc de azalt\u0131r. Ancak, \u00f6deme a\u015famas\u0131na ge\u00e7ildi\u011finde veya sipari\u015f kesinle\u015ftirildi\u011finde, g\u00fcvenlik ve tutarl\u0131l\u0131k a\u00e7\u0131s\u0131ndan sepet bilgilerinin sunucu taraf\u0131nda do\u011frulanmas\u0131 ve i\u015flenmesi gerekti\u011fini unutmamak \u00f6nemlidir.<\/p>\n
Vaka Analizi 2: Kullan\u0131c\u0131 Tercihlerini (Tema, Dil vb.) Kal\u0131c\u0131 Olarak Saklama<\/h3>\n
\u00c7o\u011fu web uygulamas\u0131, kullan\u0131c\u0131n\u0131n aray\u00fcz tercihlerini (koyu\/a\u00e7\u0131k tema, dil se\u00e7imi, bildirim ayarlar\u0131) kaydetme \u00f6zelli\u011fi sunar. Bu tercihler, kullan\u0131c\u0131n\u0131n uygulamay\u0131 her ziyaret etti\u011finde ba\u015ftan ayarlamak zorunda kalmamas\u0131 i\u00e7in localStorage<\/code>'da saklanabilir.<\/p>\n
\n\/\/ Tema ayar\u0131n\u0131 kaydetme\nfunction temaAyarlariKaydet(tema) {\n  localStorage.setItem('kullaniciTemasi', tema);\n  document.body.className = tema; \/\/ CSS s\u0131n\u0131f\u0131n\u0131 de\u011fi\u015ftirerek temay\u0131 uygula\n  console.log(Tema \"${tema}\" olarak ayarland\u0131 ve kaydedildi.<\/code>);\n}\n\n\/\/ Tema ayar\u0131n\u0131 y\u00fckleme\nfunction temaAyarlariYukle() {\n  const kaydedilenTema = localStorage.getItem('kullaniciTemasi');\n  if (kaydedilenTema) {\n    document.body.className = kaydedilenTema;\n    console.log(Kaydedilen tema \"${kaydedilenTema}\" y\u00fcklendi.<\/code>);\n  } else {\n    \/\/ Varsay\u0131lan tema\n    document.body.className = 'light';\n    console.log('Varsay\u0131lan tema (light) y\u00fcklendi.');\n  }\n}\n\n\/\/ Sayfa y\u00fcklendi\u011finde temay\u0131 y\u00fckle\nwindow.onload = temaAyarlariYukle;\n\n\/\/ Tema de\u011fi\u015ftirme butonuna t\u0131kland\u0131\u011f\u0131nda (\u00f6rnek)\ndocument.getElementById('toggleThemeBtn').addEventListener('click', function() {\n  const currentTheme = localStorage.getItem('kullaniciTemasi') || 'light';\n  const newTheme = currentTheme === 'light' ? 'dark' : 'light';\n  temaAyarlariKaydet(newTheme);\n});\n<\/pre>\n
<\/code><\/p>\n
Bu yakla\u015f\u0131m, ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunarak kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r. Ayr\u0131ca, sunucudan her seferinde kullan\u0131c\u0131 tercihlerini \u00e7ekmek yerine, do\u011frudan taray\u0131c\u0131dan h\u0131zl\u0131ca y\u00fcklenmesini sa\u011flayarak performans\u0131 da iyile\u015ftirir.<\/p>\n
Vaka Analizi 3: \u00c7evrimd\u0131\u015f\u0131 \u00c7al\u0131\u015fma Kabiliyeti \u0130\u00e7in Basit Veri \u00d6nbellekleme<\/h3>\n
Tek sayfal\u0131k uygulamalar (SPA) veya hafif i\u00e7erikli siteler i\u00e7in, localStorage<\/code>, temel verileri \u00e7evrimd\u0131\u015f\u0131 eri\u015fim i\u00e7in \u00f6nbelle\u011fe almakta kullan\u0131labilir. \u00d6rne\u011fin, bir blog sitesi, en son okunan makalelerin ba\u015fl\u0131klar\u0131n\u0131 veya k\u0131sa \u00f6zetlerini localStorage<\/code>'da saklayarak kullan\u0131c\u0131 internet ba\u011flant\u0131s\u0131 olmasa bile bu i\u00e7eri\u011fe eri\u015fmesine olanak tan\u0131yabilir.<\/p>\n
\nasync function makaleleriGetirVeCachele() {\n  try {\n    const response = await fetch('https:\/\/api.example.com\/makaleler');\n    const data = await response.json();\n    localStorage.setItem('sonMakaleler', JSON.stringify(data));\n    console.log('Makaleler API\\'den al\u0131nd\u0131 ve \u00f6nbelle\u011fe kaydedildi.');\n    return data;\n  } catch (error) {\n    console.error('API\\'den makaleler al\u0131namad\u0131, \u00f6nbelle\u011fe bak\u0131l\u0131yor:', error);\n    const cachedData = localStorage.getItem('sonMakaleler');\n    if (cachedData) {\n      console.log('Makaleler \u00f6nbellekten y\u00fcklendi.');\n      return JSON.parse(cachedData);\n    }\n    return []; \/\/ Hi\u00e7bir veri yoksa bo\u015f dizi d\u00f6nd\u00fcr\n  }\n}\n\n\/\/ Uygulama ba\u015flang\u0131c\u0131nda makaleleri y\u00fckle\nmakaleleriGetirVeCachele().then(makaleler => {\n  console.log('G\u00f6sterilecek makaleler:', makaleler);\n  \/\/ Makaleleri kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6ster...\n});\n<\/pre>\n
<\/code><\/p>\n
Bu y\u00f6ntem, kullan\u0131c\u0131lar\u0131n internet ba\u011flant\u0131s\u0131 kesildi\u011finde bile temel i\u00e7eri\u011fe eri\u015fmeye devam etmelerini sa\u011flayarak uygulama dayan\u0131kl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Ancak, b\u00fcy\u00fck ve s\u0131k g\u00fcncellenen veri setleri i\u00e7in IndexedDB<\/code> gibi daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmlerin d\u00fc\u015f\u00fcn\u00fclmesi gerekebilir, \u00e7\u00fcnk\u00fc localStorage<\/code>'\u0131n kapasite ve senkron \u00e7al\u0131\u015fma k\u0131s\u0131tlamalar\u0131 vard\u0131r.<\/p>\n
\n  Uzman \u0130pucu: Hassas kullan\u0131c\u0131 kimlik bilgilerini (tokenlar, API anahtarlar\u0131) localStorage<\/code>'da saklamaktan ka\u00e7\u0131n\u0131n. XSS sald\u0131r\u0131lar\u0131yla kolayca \u00e7al\u0131nabilirler. Bunun yerine, HTTPOnly<\/code> ve Secure<\/code> bayraklar\u0131yla ayarlanm\u0131\u015f cookies<\/code> veya daha g\u00fcvenli kimlik do\u011frulama ak\u0131\u015flar\u0131 tercih edilmelidir.\n<\/div>\n
localStorage Kullan\u0131rken Dikkat Edilmesi Gerekenler: Performans ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h2>\n
localStorage<\/code>, kolayl\u0131\u011f\u0131 ve g\u00fcc\u00fc sayesinde bir\u00e7ok senaryoda ideal bir \u00e7\u00f6z\u00fcm olsa da, do\u011fru kullan\u0131lmad\u0131\u011f\u0131nda potansiyel performans sorunlar\u0131na ve g\u00fcvenlik risklerine yol a\u00e7abilir. Bu nedenle, onu uygulamalar\u0131n\u0131za entegre ederken baz\u0131 \u00f6nemli noktalara dikkat etmek kritik \u00f6neme sahiptir.<\/p>\n
G\u00fcvenlik Riskleri ve Hassas Veri Depolama<\/h3>\n
localStorage<\/code>'\u0131n en b\u00fcy\u00fck g\u00fcvenlik dezavantaj\u0131, JavaScript ile kolayca eri\u015filebilir olmas\u0131d\u0131r. Bu durum, bir XSS (Cross-Site Scripting) sald\u0131r\u0131s\u0131na maruz kal\u0131nd\u0131\u011f\u0131nda, sald\u0131rgan\u0131n kullan\u0131c\u0131n\u0131n localStorage<\/code>'\u0131ndaki t\u00fcm verilere eri\u015febilece\u011fi anlam\u0131na gelir. Bu nedenle:<\/p>\n