Brauchbare Alternativen zu sessionStorage

Was sind die möglichen Lösungen, um sessionStorage zu ersetzen?

sessionStorage ist ein vom Browser bereitgestellter Speichermechanismus, der temporäre Sitzungsdaten im selben Fenster oder Tab speichern kann. SessionStorage weist jedoch einige Einschränkungen auf. Beispielsweise werden Daten in einer Sitzung gespeichert, die Daten werden nach dem Schließen des Fensters oder Tabs gelöscht und Daten können nicht über Fenster oder Tabs hinweg geteilt werden. Wenn wir daher eine flexiblere und globalere Datenspeicherlösung benötigen, müssen wir andere Alternativen in Betracht ziehen.

1. LocalStorage verwenden

localStorage ist leistungsfähiger als SessionStorage, Sie können Daten zwischen verschiedenen Fenstern oder Registerkarten teilen und die Daten verfallen nicht. Ähnlich wie sessionStorage ist auch localStorage eine vom Browser bereitgestellte API und kann über die folgenden Codebeispiele verwendet werden:

// Daten speichern
localStorage.setItem('key', 'value');

// Daten abrufen
var value = localStorage.getItem('key');

//Daten löschen
localStorage.removeItem('key');

// Alle Daten löschen
localStorage.clear();

2. Cookies verwenden

Außer localStorage sind Cookies auch eine gängige Lösung zur Datenspeicherung. Obwohl Cookies einige Einschränkungen haben, wie z. B. eine Begrenzung der Anzahl von Cookies unter jedem Domänennamen und eine Begrenzung der Cookie-Größe, weisen sie domänenübergreifende Eigenschaften auf und können Daten unter verschiedenen Domänennamen austauschen.

// Daten speichern und in Cookie schreiben
document.cookie = 'key=value; Expires=Do, 18. Dez. 2023 12:00:00 UTC;

// Daten aus Cookie abrufen Daten lesen in
function getCookie(name) {

var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.substring(0, name.length + 1) === (name + '=')) {
        return decodeURIComponent(cookie.substring(name.length + 1));
    }
}
return '';

}

var value = getCookie('key');

// Daten löschen und die Cookie-Ablaufzeit vor der aktuellen Zeit setzen
function deleteCookie(name) {

document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';

}

deleteCookie('key');

3. Verwenden von IndexedDB

IndexedDB ist eine vom Browser bereitgestellte erweiterte Datenbank, die große Mengen strukturierter Daten im Browser speichern kann. Im Gegensatz zu localStorage und Cookies kann IndexedDB komplexere Objekte speichern und unterstützt Funktionen wie Transaktionen und Indizes. Das Folgende ist ein Codebeispiel mit IndexedDB:

//Öffne die Datenbank
var request = window.indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {

var db = event.target.result;
var objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

};

request.onsuccess = function(event) {

var db = event.target.result;
var transaction = db.transaction(['myObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('myObjectStore');

// 存储数据
var request = objectStore.add({ id: 1, name: 'value' });

request.onsuccess = function(event) {
    console.log('Data stored successfully.');
};

// 获取数据
var getRequest = objectStore.get(1);

getRequest.onsuccess = function(event) {
    var value = getRequest.result.name;
};

// 删除数据
var deleteRequest = objectStore.delete(1);

deleteRequest.onsuccess = function(event) {
    console.log('Data deleted successfully.');
};

};

4. Bibliotheken von Drittanbietern verwenden

Zusätzlich zu den oben genannten nativen Speicherlösungen gibt es auch einige Bibliotheken von Drittanbietern, die uns dabei helfen können, mehr Daten zu speichern bequem, wie zum Beispiel:

• redux: Eine JavaScript-Bibliothek zum Verwalten des Anwendungsstatus, die Daten durch Erstellen eines globalen Speichers speichern kann.
• RxJS: Eine Bibliothek zur Verarbeitung asynchroner Datenströme, mit der globale beobachtbare Objekte zum Speichern von Daten erstellt werden können.
• MobX: Eine Bibliothek für die Zustandsverwaltung, die Daten speichern und beobachten kann, indem sie einen globalen Speicher erstellt.

Die oben genannten sind nur einige mögliche Alternativen zu sessionStorage. Die konkrete Auswahl der Lösung hängt von den tatsächlichen Anforderungen und Anwendungsszenarien ab.

Das obige ist der detaillierte Inhalt vonBrauchbare Alternativen zu sessionStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!