Home » Webentwicklung » Lokaler Speicher CRUD – Schnelle Benutzeroberfläche

Lokaler Speicher CRUD – Schnelle Benutzeroberfläche

[ad_1]

Lokaler Speicher bezeichnet die Daten, die in der App gespeichert werden. Sie benötigen keine Internetverbindung, um Daten aus dem lokalen Speicher zu erstellen oder zu lesen.

Wir werden eine einfache iOS-App in der Swift-Benutzeroberfläche erstellen, mit der Sie Werte im lokalen Speicher erstellen, lesen, aktualisieren und löschen können. Dafür werden wir eine in Swift eingebaute Klasse namens verwenden UserDefaults.

Hinweis: Die UserDefaults-Klasse darf nur zum Speichern einzelner Werte verwendet werden, z. B. last_login, name, email usw. Sie sollte NICHT zum Speichern von Daten in Tabellenform wie MySQL oder in eingebetteter Form wie Mongo DB verwendet werden.

Lokaler Speicher

Wir werden eine einfache Swift-Datei mit dem Namen erstellen LocalStorage.swift. Diese Datei übernimmt das Erstellen, Abrufen, Aktualisieren und Löschen der Daten aus dem lokalen Speicher.

//
//  LocalStorage.swift
//  Local storage CRUD
//
//  Created by Adnan Afzal on 16/11/2020.
//  Copyright © 2020 Adnan Afzal. All rights reserved.
//

import Foundation

class LocalStorage {
    
    private static let myKey: String = "myKey"
    
    public static var myValue: String {
        set {
            UserDefaults.standard.set(newValue, forKey: myKey)
        }
        get {
            return UserDefaults.standard.string(forKey: myKey) ?? ""
        }
    }
    
    public static func removeValue() {
        UserDefaults.standard.removeObject(forKey: myKey)
    }
    
}

  1. Wir erstellen eine statische Konstante mit dem Namen mein Schlüssel welches den Namen der Daten enthält.
  2. Dann erstellen wir eine statische Variable mit dem Namen myValue und es hat Getter und Setter. Sie werden automatisch aufgerufen, wenn wir versuchen, den Wert daraus zu speichern oder abzurufen.
  3. UserDefaults.standard.string Diese Funktion gibt einen optionalen Wert zurück, daher müssen wir den Standardwert mit angeben ?? „“. Hier setzen wir den leeren Wert als Standard.
  4. Zuletzt eine statische Funktion namens removeValue () wird erstellt, wodurch dieser Wert aus UserDefaults entfernt wird.

Wir haben die Variablen und Funktionen gemacht statischDaher können wir sie verwenden, ohne ein Objekt der LocalStorage-Klasse zu erstellen.

Sie können dieselbe Technik verwenden, um so viele Werte wie erforderlich hinzuzufügen.

Hauptansicht der Swift-Benutzeroberfläche

Zuerst erstellen wir eine Ansicht, in der 4 Schaltflächen zum Erstellen, Anzeigen, Aktualisieren und Löschen von Daten aus UserDefaults angezeigt werden. Erstellen Sie in Ihrer ContentView-Hauptdatei eine Navigationsansicht und erstellen Sie darin 4 Navigationslinks horizontal.

Derzeit erstellen wir einen Navigationslink nur für AddView. Wir werden später in diesem Artikel Navigationslinks für andere erstellen.

NavigationView {
    HStack { 
        NavigationLink (destination: AddView(), label: {
            Text("Add")
        })
    }
}
  1. Ziel: ist die Ansicht, die angezeigt wird, wenn auf diesen Navigationslink geklickt wird
  2. Etikette: ist die Ansicht, die dem Benutzer angezeigt wird.

Mehrwert für den lokalen Speicher

Erstellen Sie nun eine neue Swift UI-Ansichtsdatei mit dem Namen AddView.swift. In dieser Ansicht erstellen wir ein Eingabefeld und eine Schaltfläche, die beim Klicken den Textfeldwert im lokalen Speicher speichert.

Um den Wert aus dem Textfeld in der Swift-Benutzeroberfläche abzurufen, verwenden wir die @Zustand Property Wrapper. Erstellen Sie zunächst eine @ State-Variable vom Typ String in Ihrer AddView-Struktur:

@State var value: String = ""

Jetzt können wir diese Variable in Textfelder binden Text Wert.

VStack {
    TextField("Enter value", text: $value)

    Button(action: {
        LocalStorage.myValue = self.value
    }, label: {
        Text("Save")
    })
}
  1. VStack zeigt die Ansichten vertikal an.
  2. Textfeld Feld wird erstellt und sein Wert ist an unsere gebunden Wert Variable.
  3. Taste wird mit dem Text „Speichern“ erstellt, der beim Klicken die myValue Variable von Lokaler Speicher Klasse zu unserer Wert Variable.

Der Setter in der Variablen LocalStorage myValue wird automatisch aufgerufen, wenn wir den Wert zuweisen. Der Code im Setter speichert den Wert in UserDefaults.

Holen Sie sich Wert aus dem lokalen Speicher

Zuerst erstellen wir einen Navigationslink in unserer Hauptansicht, um zu einer neuen Ansicht zu wechseln und den Wert aus dem lokalen Speicher anzuzeigen.

// ContentView.swift

NavigationLink (destination: DataView(), label: {
    Text("View")
})

Erstellen Sie nun eine neue Swift UI-Ansichtsdatei mit dem Namen DataView.swift. Diese Datei ruft einfach den Wert ab und zeigt ihn in der Textansicht an.

Text(LocalStorage.myValue)

Dies ruft automatisch den Getter in der Variablen LocalStorage myValue auf. Der Getter ruft den Wert von UserDefaults ab. Wenn der Wert nicht gefunden wird, wird der Standardwert auf leere Zeichenfolge gesetzt.

Wert im lokalen Speicher bearbeiten

Zuerst erstellen wir einen Navigationslink in unserer Hauptansicht, um zu einer neuen Ansicht zu wechseln und den Wert im lokalen Speicher zu aktualisieren.

// ContentView.swift

NavigationLink (destination: EditView(), label: {
    Text("View")
})

Erstellen Sie nun eine neue Swift UI-Ansichtsdatei mit dem Namen EditView.swift. Das Bearbeiten des Werts ähnelt fast dem Hinzufügen des Werts. Aber es hat 2 Schritte:

  1. Zeigen Sie den vorhandenen Wert im Textfeld an.
  2. Aktualisieren Sie den Wert aus dem Textfeld.

In dieser Ansicht erstellen wir erneut einen @ State-Eigenschafts-Wrapper:

@State var value: String = ""

Anschließend erstellen wir VStack, um das Textfeld und eine Schaltfläche vertikal anzuzeigen. Gebunden die Wert Variable zum Wert des Textfelds. Erstellen Sie eine Schaltfläche mit dem Text „Aktualisieren“ und setzen Sie den lokalen Speicherwert auf den Textfeldwert (wie beim Hinzufügen eines Werts).

Wenn die Ansicht geladen wird, müssen Sie den vorhandenen Wert im Textfeld anzeigen. Sie können dies tun, indem Sie ein hinzufügen onAppear Funktion zu Ihrer Hauptansicht (VStack in meinem Fall). In dem ausführen Parameter werden wir den Wert aus dem lokalen Speicher abrufen und ihn unserem zuweisen Wert Variable.

Da der Text des Textfeldes an gebunden ist Wert Wenn der Wert geändert wird, wird der Text des Textfelds automatisch geändert.

VStack {
    TextField("Enter value", text: $value)
    Button(action: {
        LocalStorage.myValue = self.value
    }, label: {
        Text("Update")
    })
}
.onAppear(perform: {
    self.value = LocalStorage.myValue
})

Löschen Sie einen Wert aus dem lokalen Speicher

Zum Löschen muss kein Navigationslink erstellt werden. Wir erstellen einfach eine Schaltfläche, die beim Klicken die Funktion aufruft removeValue () aus der LocalStorage-Klasse.

Button(action: {
    LocalStorage.removeValue()
}, label: {
    Text("Delete")
})



[ad_2]