Heim > Web-Frontend > uni-app > So verwenden Sie den lokalen Cache in Uniapp

So verwenden Sie den lokalen Cache in Uniapp

PHPz
Freigeben: 2023-04-06 10:45:21
Original
1765 Leute haben es durchsucht

Die Verwendung des Caches zum Speichern von Anwendungsdaten in mobilen Anwendungen ist zu einem gängigen Vorgang geworden. Dadurch kann nicht nur die Reaktionsgeschwindigkeit der Anwendung verbessert, sondern auch Benutzerverkehr eingespart werden. Bei der Entwicklung mit Uniapp können wir dieses Ziel erreichen, indem wir den lokalen Cache verwenden, der mit Uniapp geliefert wird.

Der lokale Cache in Uniapp bezieht sich auf localStorage und sessionStorage im Client-Browser, mit denen Daten vom Typ String auf dem Client gespeichert und darauf zugegriffen werden können. Sowohl localStorage als auch sessionStorage werden im Browser des Clients gespeichert und können nach dem Schließen des Browsers bestehen bleiben, bis die Daten manuell gelöscht werden oder die Ablaufzeit erreicht ist.

Im Folgenden stellen wir vor, wie Uniapp den lokalen Cache zum Speichern und Zugreifen auf Daten verwendet.

  1. Lokalen Cache festlegen

Um den lokalen Cache einzurichten, können wir die Methoden $setStorage und $setStorageSync verwenden, die mit uniapp geliefert werden.

$setStorage-Methode

uni.$setStorage('key', 'value', function () {
  console.log('数据存储成功')
})
Nach dem Login kopieren

$setStorageSync-Methode

uni.$setStorageSync('key', 'value')
Nach dem Login kopieren

Der obige Code speichert „Wert“ in „Schlüssel“. Die erste Methode ist eine asynchrone Methode und die Rückruffunktion wird ausgeführt, wenn die Daten erfolgreich gespeichert wurden. Die zweite Methode ist eine synchrone Methode und gibt das gespeicherte Ergebnis direkt zurück.

  1. Lokale Cache-Daten abrufen

Um lokale Cache-Daten abzurufen, können wir die Methoden $getStorage und $getStorageSync verwenden, die mit uniapp geliefert werden.

$getStorage-Methode

uni.$getStorage('key', function (res) {
  console.log(res.data)
})
Nach dem Login kopieren

$getStorageSync-Methode

var data = uni.getStorageSync('key')
console.log(data)
Nach dem Login kopieren

Der obige Code ruft die gespeicherten Daten vom „Schlüssel“ ab. Die erste Methode ist asynchron und die Rückruffunktion wird ausgeführt, nachdem die Daten erfolgreich abgerufen wurden. Die zweite Methode ist synchron und gibt das Ergebnis direkt zurück.

  1. Lokale Cache-Daten löschen

Wenn wir lokale Cache-Daten löschen möchten, können wir die Methoden $removeStorage und $removeStorageSync verwenden, die mit uniapp geliefert werden.

$removeStorage-Methode

uni.$removeStorage('key', function () {
  console.log('数据删除成功')
})
Nach dem Login kopieren

$removeStorageSync-Methode

uni.$removeStorageSync('key')
Nach dem Login kopieren

Der obige Code löscht die in „key“ gespeicherten Daten. Die erste Methode ist asynchron und die Rückruffunktion wird ausgeführt, nachdem der Löschvorgang erfolgreich war. Die zweite Methode ist synchron und gibt das Löschergebnis direkt zurück.

  1. Lokale Cache-Daten löschen

Wenn wir alle lokalen Cache-Daten löschen möchten, können wir die Methoden $clearStorage und $clearStorageSync verwenden, die mit uniapp geliefert werden.

$clearStorage-Methode

uni.$clearStorage(function () {
  console.log('本地缓存已清除')
})
Nach dem Login kopieren

$clearStorageSync-Methode

uni.$clearStorageSync()
Nach dem Login kopieren

Der obige Code löscht alle Daten in localStorage und sessionStorage im Client-Browser. Die erste Methode ist asynchron und die Rückruffunktion wird ausgeführt, nachdem die Daten erfolgreich gelöscht wurden. Die zweite Methode ist synchron und gibt direkt das klare Ergebnis zurück.

Zusammenfassung

Der lokale Cache ist ein sehr nützliches Werkzeug bei der Entwicklung von Uniapp-Anwendungen. Durch die Verwendung des lokalen Caches, der mit uniapp geliefert wird, können wir Daten auf dem Client speichern und bei Bedarf abrufen, wodurch die Antwortleistung der Anwendung verbessert und Benutzerverkehr eingespart wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den lokalen Cache in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage