<\/div>\n

Merhaba,<\/p>\n

Her\u015fey de\u011fi\u015fir, web uygulamalar\u0131nda performans oda\u011f\u0131 de\u011fi\u015fmez. Evet, g\u00fcn\u00fcm\u00fczde bundan aylar hatta g\u00fcnler \u00f6nceki nice i\u015flevsellik g\u00f6steren y\u00f6ntemler daha iyi ve daha dinamik y\u00f6ntemler taraf\u0131ndan rafa kald\u0131r\u0131lm\u0131\u015fken bu tuhaf seleksiyonun performans odakl\u0131 bir \u015fekilde cereyan etti\u011fi ger\u00e7e\u011fini kabul etmeliyiz.<\/p>\n

Bu geli\u015fim s\u00fcrecinde genellikle clientlara yani kullan\u0131c\u0131 bilgisayarlar\u0131na yo\u011funlu\u011fu y\u00f6nlendirmeye \u00e7al\u0131\u015fmakta ve m\u00fcmk\u00fcn mertebe y\u00fck serverdan ar\u0131nd\u0131r\u0131lmaya \u00e7al\u0131\u015f\u0131lmaktad\u0131r. Bu i\u00e7eri\u011fimizde bu y\u00f6nlendirmenin k\u00fc\u00e7\u00fck par\u00e7as\u0131n\u0131 ele alaca\u011f\u0131z ve kullan\u0131c\u0131n\u0131n bilgisayar\u0131nda ufak tefek verileri saklamay\u0131 konu\u015faca\u011f\u0131z.<\/p>\n

Tabi ufak tefek veriler deyince direkt olarak akl\u0131n\u0131za \u00e7erezler(cookie) gelecektir. Lakin biz bu i\u00e7eri\u011fimizde zerre \u00e7erezlerden bahsetmeyecek, HTML 5’in getirisi olan Local Storage<\/strong> \u00fczerine odaklanaca\u011f\u0131z.<\/p>\n

Neden \u00e7erezler varken ayn\u0131 i\u015flemi yapan ba\u015fka bir tekni\u011fi tercih edelim ki?<\/strong> sorusunu sorabilirsiniz. Evet hakl\u0131s\u0131n\u0131z. \u00c7erezler kullan\u0131c\u0131ya ait verileri domain ile ili\u015fkilendirip kullan\u0131c\u0131 bilgisayar\u0131nda tutmaktad\u0131r. Local Storage<\/strong> yap\u0131s\u0131da ayn\u0131 i\u015flevi g\u00f6rmektedir. Lakin \u00e7erezlerin;<\/p>\n

\n
web sitelerine her girdi\u011fimizde okunduklar\u0131n\u0131 ve bu \u015fekilde performans kayb\u0131na sebep olduklar\u0131n\u0131,<\/li>\n
4 KB’l\u0131k boyutta sakland\u0131klar\u0131n\u0131 ve<\/li>\n
baz\u0131 g\u00fcvenlik sorunlar\u0131yla beraber burada bahsetmeye de\u011fmeyecek nice nice a\u00e7\u0131klar bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131<\/li>\n<\/ul>\n
g\u00f6z \u00f6n\u00fcne al\u0131rsak e\u011fer Local Storage yap\u0131s\u0131n\u0131n daha tercih edilebilir oldu\u011fu kanaatine varabiliriz.<\/p>\n
HTML 5’i destekleyen t\u00fcm browserlarda \u00e7al\u0131\u015fan Local Storage \u00f6zelli\u011fi(ki HTML 5’i desteklemeyen browser m\u0131 kald\u0131 hoca la<\/em><\/span>) cookielere nazaran olduk\u00e7a h\u0131zl\u0131 ve temiz i\u015f y\u00fcr\u00fctmemizi sa\u011flayan bir yap\u0131ya sahiptir. Ad\u0131ndan da anla\u015f\u0131labilece\u011fi gibi yerel depolama birimidir. 5 MB’da kadar veri tutma imkan\u0131na sahiptir. 5 MB’l\u0131k veriyi sunucuya sezdirmeden istedi\u011finiz gibi i\u015fleyebilirsiniz.<\/p>\n
Angular \u0130le Local Storage Kullan\u0131m\u0131<\/h3>\n
Local Storage, yap\u0131sal olarak JavaScript ile kolayl\u0131kla m\u00fcdahale edilebilir bir \u00f6zelli\u011fe sahiptir. Eee bizler bu i\u00e7eri\u011fimizde Angular 4 ile nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ele alaca\u011f\u0131m\u0131za g\u00f6re TypeScript \u00fczerinden konuyu de\u011ferlendirece\u011fiz. <\/p>\n
Local Storage’in Projeye Install Edilmesi<\/h4>\n
Angular projesinde Local Storage’i kullanabilmek i\u00e7in;<\/p>\n
\r\nnpm install angular-2-local-storage --save\r\n<\/pre>\n
komutunu Integrated Terminal penceresinde \u00e7al\u0131\u015ft\u0131rman\u0131z yeterlidir. Bu i\u015flemi yapt\u0131ktan sonra gerekli paketlerin y\u00fcklenmesini Angular CLI halledecektir.<\/p>\n
Local Storage’in Import Edilmesi<\/h4>\n
Local Storage’i y\u00fckledikten sonra LocalStorageModule<\/strong> mod\u00fcl\u00fcn\u00fc kullanabilmek i\u00e7in ana mod\u00fcl\u00fcm\u00fcze “angular-2-local-storage” dizininden a\u015fa\u011f\u0131daki gibi import etmemiz gerekmektedir.<\/p>\n
\r\nimport { LocalStorageModule } from 'angular-2-local-storage';\r\n<\/pre>\n
Ard\u0131ndan projede yap\u0131sal olarak tam kurulum i\u00e7in ilgili mod\u00fcl\u00fc a\u015fa\u011f\u0131daki gibi import etmeli ve gerekli ayarlar\u0131 ger\u00e7ekle\u015ftirmeliyiz.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { LocalStorageModule } from 'angular-2-local-storage';\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n LocalStorageModule.withConfig({\r\n prefix: "storage",\r\n storageType: "localStorage"\r\n })\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
Burada dikkat ederseniz e\u011fer “LocalStorageModule” mod\u00fcl\u00fcn\u00fcn “withConfig” metoduna verilen parametrede “prefix” \u00f6zelli\u011fi olu\u015fturaca\u011f\u0131m\u0131z yerel depoya bir \u00f6n isim sa\u011flarken, “storageType” \u00f6zelli\u011fi ise hangi \u00f6zelli\u011fi kullanaca\u011f\u0131m\u0131z\u0131 belirtmektedir.<\/p>\n
Local Storage Kullan\u0131m\u0131<\/h4>\n
Art\u0131k Local Storage’i kullanaca\u011f\u0131m\u0131z alanda “angular-2-local-storage” dizininden LocalStorageService<\/strong> servisini import ederek yerel depoyu kullanabiliriz.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { LocalStorageService } from 'angular-2-local-storage';\r\n@Component({\r\n selector: 'app-user-login',\r\n templateUrl: '.\/user-login.component.html',\r\n styleUrls: ['.\/user-login.component.css']\r\n})\r\nexport class UserLoginComponent implements OnInit {\r\n constructor(private localStorageService: LocalStorageService) { }\r\n ngOnInit() {\r\n }\r\n}\r\n<\/pre>\n
Birazdan bu componentte gerekli \u00e7al\u0131\u015fmalar\u0131 yapaca\u011f\u0131z. Tabi yapt\u0131\u011f\u0131m\u0131z \u00e7al\u0131\u015fmalar\u0131 denetleyebilmek i\u00e7in \u00f6ncelikle Local Storage penceresinin Chrome ve Firefox taray\u0131c\u0131lar\u0131nda nas\u0131l a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 inceleyelim.<\/p>\n
Chrome taray\u0131c\u0131s\u0131 i\u00e7in;
\nSayfaya sa\u011f t\u0131klayarak, “\u0130ncele” -> “Application” kombinasyonundan “Storage” kategorisindeki “Local Storage” sekmesine t\u0131klarsan\u0131z e\u011fer ilgili sayfaya ait yerel depo birimine eri\u015fmi\u015f olacaks\u0131n\u0131z.
\n $\"Angular$ <\/a><\/p>\n
Firefox taray\u0131c\u0131s\u0131 i\u00e7in;
\nSayfaya sa\u011f t\u0131klayarak, “\u00d6\u011feyi \u0130ncele” -> “Depolama” -> “Yerel Depo” kombinasyonu istenilen ekrana eri\u015ftirecektir.
\n $\"Angular$ <\/a><\/p>\n
Bizler bu ad\u0131mdan sonra i\u00e7eri\u011fimizde Chrome taray\u0131c\u0131s\u0131yla yolumuza devam edece\u011fiz.<\/p>\n
\u015eimdi yerel depomuzda veri ekleme, eklenen veriyi okuma, veri silme ve toplu silme i\u015flemlerini antreman edelim.<\/p>\n
\r\n--- user-login.component.html ---\r\nKullan\u0131c\u0131 Ad\u0131\r\n<br>\r\n<input type="text" #txtUserName \/>\r\n<br> \u015eifre\r\n<br>\r\n<input type="text" #txtPassword \/>\r\n<br>\r\n<button (click)="AddLocalStorage(txtUserName.value, txtPassword.value)">Login<\/button>\r\n<hr>\r\nKey\r\n<input type="text" #txtKey>\r\n<button (click)="ReadLocalStorage(txtKey.value)">Local Storage Oku<\/button>\r\n<hr>\r\nKey\r\n<input type="text" #txtKey2>\r\n<button (click)="RemoveLocalStorage(txtKey2.value)">Local Storage Sil<\/button>\r\n<hr>\r\n<button (click)="RemoveAllLocalStorage()">T\u00fcm Verileri Sil<\/button>\r\n<\/pre>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { LocalStorageService } from 'angular-2-local-storage';\r\n@Component({\r\n selector: 'app-user-login',\r\n templateUrl: '.\/user-login.component.html',\r\n styleUrls: ['.\/user-login.component.css']\r\n})\r\nexport class UserLoginComponent implements OnInit {\r\n constructor(private localStorageService: LocalStorageService) { }\r\n AddLocalStorage(userName, password) {\r\n this.localStorageService.add("userName", userName);\r\n this.localStorageService.add("password", password);\r\n }\r\n ReadLocalStorage(key) {\r\n let value = this.localStorageService.get(key);\r\n alert(value);\r\n }\r\n RemoveLocalStorage(key) {\r\n this.localStorageService.remove(key);\r\n }\r\n RemoveAllLocalStorage() {\r\n this.localStorageService.clearAll();\r\n }\r\n ngOnInit() {\r\n }\r\n}\r\n<\/pre>\n
Bu \u00e7al\u0131\u015fmay\u0131 kaydedip yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi i\u015flevsellik g\u00f6sterecektir.
\n $\"Angular$ <\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Angular 4 ile Local Storage yerel depo \u00f6zelli\u011fini ba\u015far\u0131yla ve olduk\u00e7a basit bir \u015fekilde kullanm\u0131\u015f bulunmaktay\u0131z.<\/p>\n
Faydalanman\u0131z dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Her\u015fey de\u011fi\u015fir, web uygulamalar\u0131nda performans oda\u011f\u0131 de\u011fi\u015fmez. Evet, g\u00fcn\u00fcm\u00fczde bundan aylar hatta g\u00fcnler \u00f6nceki nice i\u015flevsellik g\u00f6steren y\u00f6ntemler daha iyi ve daha dinamik y\u00f6ntemler taraf\u0131ndan rafa kald\u0131r\u0131lm\u0131\u015fken bu tuhaf seleksiyonun performans odakl\u0131 bir...<\/p>\n","protected":false},"author":1,"featured_media":8207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2378,2379,2376,2375,2377],"class_list":["post-8192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-local-storage","tag-angular-local-storage","tag-local-storage","tag-localstoragemodule","tag-localstorageservice"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8192"}],"version-history":[{"count":20,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8192\/revisions"}],"predecessor-version":[{"id":8215,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8192\/revisions\/8215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8207"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}