Local storage giriş kontrolu, beni hatırla yapmak , vue js

Merhabalar, üzerinde çalıştığım proje karmaşık bir hal aldı hem üstünde öğreniyorum hem geliştiriyorum. İçinde yarım yamalak vue js de var düz javascript , jquery de var. Bariz spagetti kod oldu ama iş görüyor. Önemli olan işlevi. Zaten junioriz sıkıntı yok.

Neyse çok muhabbet yeter konuya geçelim. Yapmak istediğim kullanıcı giriş yaptığında bir daha griş sayfasına yönlendirmemek. Direk onu hatırlayıp anasayfaya göndermek. Uygulamayı vs kapatıp açsada locali temizleme araçları ile temizlemedikten sonra yada kodla silmezse sıkıntı olmaz.

Local storage nedir ? 

kısaca  tarayıcınızda bilgi tutmaya yarar. Nerelerde kullanılır? Beni hatırla gibi form girişlerinde, mobil uygulamalarda internetsiz çalıştığında (html5 ise ) veri tabanı olarak kullanırlar vs vs   Bunun kardeşi vardır cookie (çerezler) buda ona benzer.

Yapılacaklar. 

json nesnesinden veri çekip giriş kontrolü yaptırmak,

Giriş kontrolünü geçerse kullanıcı ve şifresi doğruysa bilgilerini locale kaydetmek,

Localstorage nasıl kullanılır?

Başlıyoruz. Ben projede vue js kullanıyorum. Bazı yerlerde verileri onla çekiyorum ama localstorange kısmı düz js zaten. Verilerin hepsi bir sayfada. Sizde jqueryle vs çekersiniz duruma göre…

index.html (login sayfası html kısmı işte) buradan email ve şifre alıyoruz

<form  @submit.prevent="login">
    <div class="form-group">
        <label for="exampleInputEmail1">Kullanıcı Adı</label>
        <div class="user-name-input">
            <img  src="images/user.png" class="img-fluid" alt="Responsive image">
            <input type="email" v-model="email" class="form-control user-name" id="exampleInputEmail1" aria-describedby="emailHelp" value="" placeholder="Enter email">
        </div>
    </div>
    <div class="form-group" >
        <label for="exampleInputPassword1">Şifre</label>
        <div class="user-name-input">
            <img  src="images/password.png" class="img-fluid" alt="Responsive image">
            <input v-model="password" type="password" class="form-control user-password" id="exampleInputPassword1" placeholder="Password"  value="">
        </div>
    </div>

    <div class="form-group saga-yasla">
        <a style="color:#fff;" v-on:click="login" hre1f="anasayfa1.html" class="btn btn-primary" role="button" aria-disabled="true">GİRİŞ</a>

    </div>

</form>

js kısmı

<script>
    var app = new Vue({
        el: '#giris',
        name: 'Login',
        data:function () {
            return {
                email: '',
                password: '',
                uyeler: [],
                durum : "-1",
                kayitliemail: "",
                kayitlisifre: "",
                durum2: "-1",


            }
        },
        methods: {
            getUyeler: function() {
                this.uyeler = uyeler;
            },

            Depo: function() {
                localStorage.setItem('email', this.email);
                localStorage.setItem('sifre', this.password);
            },



            login: function () {

                this.Depo();
//json nesnesinden üyeleri çekiyorum sonra kontolünü yapıyorum alt kısımda eğer doğruysa durumu 1 olarka güncelliyor. Buda giriş yapmış demek oluyor.

                var u = this.uyeler;
                for (var i=0; i < u.length; i++){

                    if(this.email == u[i].email && this.password == u[i].sifre){
                        this.durum = 1;
                        break;
                    }
                }

                if (this.durum != -1) {
                    $(window).attr('location', 'anasayfa.html')
                }
                else {
                    alert ("Şifre veya email yanlış!");

                }

            },
        },


        created :function() {
            this.getUyeler()


            this.kayitliemail = localStorage.getItem("email");
            this.kayitlisifre = localStorage.getItem("sifre");

            var u = this.uyeler;
            for (var i=0; i < u.length; i++){

                if(this.kayitliemail == u[i].email && this.kayitlisifre ==u[i].sifre){
                    this.durum2 = 1;
                    break;
                }
            }
            if (this.durum2 != -1){
                $(window).attr('location', 'anasayfa.html')
            }

        },


    });


</script>

giriş işlemi başarılı olduğunda kayıt yapılmıs demektir. Localdeki verileri chrome consol kısmından altaki sekilde görürsünüz

 

localstorage verileri komple silme kodu

localStorage.clear()

tek silme  vs de var artık siz ona w3 den bakarsınız.

Bunun kontrolü vs yapılıypor. Localstorage yi tarayıcı destekliyormu vs diye ben acaleye geldiğinden o kodu bile koymadım. w3 den bakıp kodu koyarsınız siz.

Kaba taslak bu iş böyle ben bunu çok bildiğimden paylaşmıyorum. Ben gibi bu işlerde yeni olanlar öğrenirken zorlanıyor. İyi kötü  işe yarar yol gösterir. Başkasınında işine yarar hem. Hadi bu Eyvallah…

Bir cevap yazın