localforage vs react-query vs redux-persist vs dexie-react-hooks vs use-local-storage | "Datenpersistenz in Webanwendungen" npm-Pakete Vergleich

Paket	Downloads	Stars	Größe	Issues	Veröffentlichung	Lizenz

localforage	4,335,734	25,461	-	248	vor 4 Jahren	Apache-2.0
react-query	1,409,018	45,749	2.26 MB	119	vor 2 Jahren	MIT
redux-persist	1,166,971	13,010	-	596	vor 6 Jahren	MIT
dexie-react-hooks	87,102	13,270	83.7 kB	586	vor 2 Jahren	Apache-2.0
use-local-storage	30,861	-	19.3 kB	-	vor 2 Jahren	MIT

Paket

Downloads

Stars

Größe

Issues

Veröffentlichung

Lizenz

localforage

4,335,734

25,461

248

vor 4 Jahren

Apache-2.0

react-query

1,409,018

45,749

2.26 MB

119

vor 2 Jahren

MIT

redux-persist

1,166,971

13,010

596

vor 6 Jahren

MIT

dexie-react-hooks

87,102

13,270

83.7 kB

586

vor 2 Jahren

Apache-2.0

use-local-storage

30,861

19.3 kB

vor 2 Jahren

MIT

Speicherart

localforage:
localforage verwendet eine Kombination aus IndexedDB, WebSQL und Local Storage, je nachdem, was im Browser verfügbar ist. Es wählt automatisch die beste verfügbare Speicherlösung aus.
react-query:
react-query ist nicht für die lokale Speicherung konzipiert, sondern konzentriert sich auf das Abrufen und Caching von Daten aus API-Endpunkten. Es kann jedoch mit lokalen Speicherlösungen kombiniert werden.
redux-persist:
redux-persist speichert den Zustand des Redux-Stores im lokalen Speicher, in der Sitzung oder in einer benutzerdefinierten Speicherlösung, die Sie bereitstellen.
dexie-react-hooks:
dexie-react-hooks verwendet IndexedDB, eine leistungsstarke, transaktionale Datenbank, die im Browser eingebaut ist und komplexe Datenstrukturen wie Objekte und Arrays speichern kann.
use-local-storage:
use-local-storage speichert Daten direkt im Local Storage des Browsers, was einfach und schnell ist, aber nur Schlüssel-Wert-Paare unterstützt.

Reaktive Unterstützung

localforage:
localforage bietet keine eingebaute reaktive Unterstützung, aber Sie können es mit React oder anderen Frameworks verwenden, um Änderungen manuell zu verwalten.
react-query:
react-query bietet reaktive Datenverwaltung mit automatischen Neurendern von Komponenten, wenn sich die abgerufenen Daten ändern.
redux-persist:
redux-persist bietet keine direkte reaktive Unterstützung, aber es funktioniert gut mit Redux, das reaktive Updates basierend auf Zustandsänderungen ermöglicht.
dexie-react-hooks:
dexie-react-hooks bietet reaktive Unterstützung durch die Verwendung von React-Hooks, die es Komponenten ermöglichen, automatisch neu zu rendern, wenn sich die Daten ändern.
use-local-storage:
use-local-storage bietet eine einfache reaktive Unterstützung, indem es den Zustand mit Local Storage synchronisiert und Komponenten neu rendert, wenn sich die Daten ändern.

Einfache Integration

localforage:
localforage ist einfach zu integrieren und kann in jeder JavaScript-Anwendung verwendet werden, unabhängig von Frameworks.
react-query:
react-query erfordert eine gewisse Einarbeitung, bietet aber eine umfassende Dokumentation und Tools zur Integration in React-Anwendungen.
redux-persist:
redux-persist lässt sich leicht in bestehende Redux-Anwendungen integrieren, erfordert jedoch die Konfiguration eines Persistors.
dexie-react-hooks:
dexie-react-hooks lässt sich leicht in React-Anwendungen integrieren, erfordert jedoch ein gewisses Verständnis von IndexedDB und der Verwendung von Hooks.
use-local-storage:
use-local-storage ist sehr einfach zu integrieren und erfordert nur die Verwendung eines Hooks.

Beispielcode

localforage:

import localforage from 'localforage';

localforage.setItem('key', 'value').then(() => {
  return localforage.getItem('key');
}).then(value => {
  console.log(value);
});

react-query:

import { useQuery } from 'react-query';

function fetchData() {
  return fetch('/api/data').then(res => res.json());
}

function App() {
  const { data, error, isLoading } = useQuery('data', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

redux-persist:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

const persistConfig = { key: 'root', storage };
const rootReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// In your component
store.dispatch({ type: 'SET_DATA', payload: 'Hello World' });

dexie-react-hooks:

import { useDexie } from 'dexie-react-hooks';
import Dexie from 'dexie';

const db = new Dexie('MyDatabase');
db.version(1).stores({ users: '++id,name,age' });

function App() {
  const { data, add } = useDexie(db.users);

  return (
    <div>
      <button onClick={() => add({ name: 'Alice', age: 25 })}>Add User</button>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name} - {user.age}</li>
        ))}
      </ul>
    </div>
  );
}

use-local-storage:

import { useLocalStorage } from 'use-local-storage';

function App() {
  const [value, setValue] = useLocalStorage('myKey', 'defaultValue');

  return (
    <div>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <p>Stored Value: {value}</p>
    </div>
  );
}