Alternatives viables à sessionStorage

Quelles sont les solutions possibles pour remplacer sessionStorage ?

sessionStorage est un mécanisme de stockage fourni par le navigateur qui peut stocker les données de session temporaires dans la même fenêtre ou le même onglet. Cependant, sessionStorage présente certaines limites. Par exemple, les données sont stockées dans une session, les données seront effacées après la fermeture de la fenêtre ou de l'onglet et les données ne peuvent pas être partagées entre les fenêtres ou les onglets. Par conséquent, si nous avons besoin d’une solution de stockage de données plus flexible et plus globale, nous devons envisager d’autres alternatives.

1. Utilisez localStorage

localStorage est plus puissant que sessionStorage, vous pouvez partager des données entre différentes fenêtres ou onglets, et les données n'expireront pas. Semblable à sessionStorage, localStorage est également une API fournie par le navigateur et peut être utilisée via les exemples de code suivants :

// Stocker des données
localStorage.setItem('key', 'value');

// Obtenir des données
var value = localStorage.getItem('key');

//Supprimer les données
localStorage.removeItem('key');

// Effacer toutes les données
localStorage.clear();

2. Utiliser les cookies

Outre localStorage, les cookies sont également une solution courante de stockage de données. Bien que les cookies présentent certaines limitations, telles qu'une limite sur le nombre de cookies sous chaque nom de domaine et une limite sur la taille des cookies, ils ont des caractéristiques inter-domaines et peuvent partager des données sous différents noms de domaine.

// Stocker les données et écrire des données dans le cookie
document.cookie = 'key=value; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

// Obtenir les données du cookie Lire les données 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');

// Supprimez les données et définissez l'heure d'expiration du cookie avant l'heure actuelle
function deleteCookie(name) {

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

}

deleteCookie('key');

3. Utilisation d'IndexedDB

IndexedDB est une base de données avancée fournie par le navigateur qui peut stocker de grandes quantités de données structurées dans le navigateur. Contrairement à localStorage et aux cookies, IndexedDB peut stocker des objets plus complexes et prend en charge des fonctions telles que les transactions et les index. Voici un exemple de code utilisant IndexedDB :

//Ouvrez la base de données
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. Utiliser des bibliothèques tierces

En plus des solutions de stockage natives ci-dessus, il existe également des bibliothèques tierces qui peuvent nous aider à stocker davantage de données commodément, comme :

• redux : Une bibliothèque JavaScript pour gérer l'état de l'application, qui peut stocker des données en créant un magasin global.
• RxJS : Une bibliothèque de gestion des flux de données asynchrones, qui peut être utilisée pour créer des objets observables globaux pour stocker des données.
• MobX : Une bibliothèque de gestion d'état qui peut stocker et observer des données en créant un magasin global.

Ce qui précède ne sont que quelques alternatives possibles à sessionStorage. La solution spécifique à choisir dépend des besoins réels et des scénarios d'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!