Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular 4 – Local Storage Kullanımı

Merhaba,

Herşey değişir, web uygulamalarında performans odağı değişmez. Evet, günümüzde bundan aylar hatta günler önceki nice işlevsellik gösteren yöntemler daha iyi ve daha dinamik yöntemler tarafından rafa kaldırılmışken bu tuhaf seleksiyonun performans odaklı bir şekilde cereyan ettiği gerçeğini kabul etmeliyiz.

Bu gelişim sürecinde genellikle clientlara yani kullanıcı bilgisayarlarına yoğunluğu yönlendirmeye çalışmakta ve mümkün mertebe yük serverdan arındırılmaya çalışılmaktadır. Bu içeriğimizde bu yönlendirmenin küçük parçasını ele alacağız ve kullanıcının bilgisayarında ufak tefek verileri saklamayı konuşacağız.

Tabi ufak tefek veriler deyince direkt olarak aklınıza çerezler(cookie) gelecektir. Lakin biz bu içeriğimizde zerre çerezlerden bahsetmeyecek, HTML 5’in getirisi olan Local Storage üzerine odaklanacağız.

Neden çerezler varken aynı işlemi yapan başka bir tekniği tercih edelim ki? sorusunu sorabilirsiniz. Evet haklısınız. Çerezler kullanıcıya ait verileri domain ile ilişkilendirip kullanıcı bilgisayarında tutmaktadır. Local Storage yapısıda aynı işlevi görmektedir. Lakin çerezlerin;

  • web sitelerine her girdiğimizde okunduklarını ve bu şekilde performans kaybına sebep olduklarını,
  • 4 KB’lık boyutta saklandıklarını ve
  • bazı güvenlik sorunlarıyla beraber burada bahsetmeye değmeyecek nice nice açıklar barındırdığını

göz önüne alırsak eğer Local Storage yapısının daha tercih edilebilir olduğu kanaatine varabiliriz.

HTML 5’i destekleyen tüm browserlarda çalışan Local Storage özelliği(ki HTML 5’i desteklemeyen browser mı kaldı hoca la) cookielere nazaran oldukça hızlı ve temiz iş yürütmemizi sağlayan bir yapıya sahiptir. Adından da anlaşılabileceği gibi yerel depolama birimidir. 5 MB’da kadar veri tutma imkanına sahiptir. 5 MB’lık veriyi sunucuya sezdirmeden istediğiniz gibi işleyebilirsiniz.

Angular İle Local Storage Kullanımı

Local Storage, yapısal olarak JavaScript ile kolaylıkla müdahale edilebilir bir özelliğe sahiptir. Eee bizler bu içeriğimizde Angular 4 ile nasıl kullanacağımızı ele alacağımıza göre TypeScript üzerinden konuyu değerlendireceğiz.

Local Storage’in Projeye Install Edilmesi

Angular projesinde Local Storage’i kullanabilmek için;

npm install angular-2-local-storage --save

komutunu Integrated Terminal penceresinde çalıştırmanız yeterlidir. Bu işlemi yaptıktan sonra gerekli paketlerin yüklenmesini Angular CLI halledecektir.

Local Storage’in Import Edilmesi

Local Storage’i yükledikten sonra LocalStorageModule modülünü kullanabilmek için ana modülümüze “angular-2-local-storage” dizininden aşağıdaki gibi import etmemiz gerekmektedir.

import { LocalStorageModule } from 'angular-2-local-storage';

Ardından projede yapısal olarak tam kurulum için ilgili modülü aşağıdaki gibi import etmeli ve gerekli ayarları gerçekleştirmeliyiz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LocalStorageModule } from 'angular-2-local-storage';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LocalStorageModule.withConfig({
      prefix: "storage",
      storageType: "localStorage"
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Burada dikkat ederseniz eğer “LocalStorageModule” modülünün “withConfig” metoduna verilen parametrede “prefix” özelliği oluşturacağımız yerel depoya bir ön isim sağlarken, “storageType” özelliği ise hangi özelliği kullanacağımızı belirtmektedir.

Local Storage Kullanımı

Artık Local Storage’i kullanacağımız alanda “angular-2-local-storage” dizininden LocalStorageService servisini import ederek yerel depoyu kullanabiliriz.

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';
@Component({
  selector: 'app-user-login',
  templateUrl: './user-login.component.html',
  styleUrls: ['./user-login.component.css']
})
export class UserLoginComponent implements OnInit {
  constructor(private localStorageService: LocalStorageService) { }
  ngOnInit() {
  }
}

Birazdan bu componentte gerekli çalışmaları yapacağız. Tabi yaptığımız çalışmaları denetleyebilmek için öncelikle Local Storage penceresinin Chrome ve Firefox tarayıcılarında nasıl açıldığını inceleyelim.

Chrome tarayıcısı için;
Sayfaya sağ tıklayarak, “İncele” -> “Application” kombinasyonundan “Storage” kategorisindeki “Local Storage” sekmesine tıklarsanız eğer ilgili sayfaya ait yerel depo birimine erişmiş olacaksınız.
Angular 4 - Local Storage Kullanımı

Firefox tarayıcısı için;
Sayfaya sağ tıklayarak, “Öğeyi İncele” -> “Depolama” -> “Yerel Depo” kombinasyonu istenilen ekrana eriştirecektir.
Angular 4 - Local Storage Kullanımı

Bizler bu adımdan sonra içeriğimizde Chrome tarayıcısıyla yolumuza devam edeceğiz.

Şimdi yerel depomuzda veri ekleme, eklenen veriyi okuma, veri silme ve toplu silme işlemlerini antreman edelim.

--- user-login.component.html ---
Kullanıcı Adı
<br>
<input type="text" #txtUserName />
<br> Şifre
<br>
<input type="text" #txtPassword />
<br>
<button (click)="AddLocalStorage(txtUserName.value, txtPassword.value)">Login</button>
<hr>
Key
<input type="text" #txtKey>
<button (click)="ReadLocalStorage(txtKey.value)">Local Storage Oku</button>
<hr>
Key
<input type="text" #txtKey2>
<button (click)="RemoveLocalStorage(txtKey2.value)">Local Storage Sil</button>
<hr>
<button (click)="RemoveAllLocalStorage()">Tüm Verileri Sil</button>
import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';
@Component({
  selector: 'app-user-login',
  templateUrl: './user-login.component.html',
  styleUrls: ['./user-login.component.css']
})
export class UserLoginComponent implements OnInit {
  constructor(private localStorageService: LocalStorageService) { }
  AddLocalStorage(userName, password) {
    this.localStorageService.add("userName", userName);
    this.localStorageService.add("password", password);
  }
  ReadLocalStorage(key) {
    let value = this.localStorageService.get(key);
    alert(value);
  }
  RemoveLocalStorage(key) {
    this.localStorageService.remove(key);
  }
  RemoveAllLocalStorage() {
    this.localStorageService.clearAll();
  }
  ngOnInit() {
  }
}

Bu çalışmayı kaydedip yayınladığımızda aşağıdaki ekran görüntüsünde olduğu gibi işlevsellik gösterecektir.
Angular 4 - Local Storage Kullanımı

Görüldüğü üzere Angular 4 ile Local Storage yerel depo özelliğini başarıyla ve oldukça basit bir şekilde kullanmış bulunmaktayız.

Faydalanmanız dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 20 Haziran 2018

    […] oturum işlemleri için Angular 4 – Local Storage Kullanımı başlıklı makalede değindiğim yerel depo birimini kullandığımı hatırlatmak […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir