Implementieren Sie die automatische Speicherung mit JavaScript

In diesem Artikel werden wir untersuchen, wie wir eine automatische Speicherfunktion mit Javascript und ReactJS implementieren können. Die Funktionen zum automatischen Speichern sind praktisch, wenn die Anwendung den vom Benutzer eingegebenen Inhalt automatisch speichern möchte. Anwendungen wie Online-Formulare, Excel usw. benötigen solche Funktionen zum automatischen Speichern.

Sie benötigen einige Grundkenntnisse in Javascript und React (v16), um die unten erwähnte Implementierung im Detail zu verstehen.

Der Einfachheit halber haben wir hier den Online-Code-Editor StackBlitz verwendet , um ein einfaches ReactJS-Projekt zu erstellen. Der Code ist am Ende dieses Artikels als Referenz verfügbar.

Projektübersicht:

Das Projekt wird wie folgt umgesetzt:

1. Ein HTML-Eingabeelement wird zum Empfangen/Aufzeichnen von Benutzereingaben verwendet.
2. Verwenden des Sitzungsspeichers des Browsers zum Speichern/Speichern von Benutzereingaben, sobald der Benutzer mit der Eingabe aufhört.

src/index.jsist die Root -Datei. Es importiert src/App.jsDateien und rendert deren Inhalt.

src/App.jshat die Kernlogik, die Benutzereingaben zu verarbeiten und den Inhalt automatisch im sessionStorage des Browsers zu speichern . src/App.jsimportiert src/components/customInput/CustomInput.jsKomponente und wird zum Empfangen von Benutzereingaben verwendet.

Code-Implementierung:

Wie im Abschnitt Projektordnerstruktur erwähnt, istApp.js die Kernkomponente für die Verarbeitung von Benutzereingaben (erhalten von CustomInput.js) und das (automatische) Speichern von Inhalten in sessionStorage verantwortlich.

//App.js
import React, { useState, useRef } from 'react';
import CustomInput from './components/customInput/CustomInput';
import './style.css';
// Save action will be triggered after SAVE_AFTER_MS milliseconds have passed since user's last input.
const SAVE_AFTER_MS = 1000;
export default function App() {
const [inputValue, setInputValue] = useState(() => '');
const [isSaving, setIsSaving] = useState(() => false);
const autoSaveTimer = useRef(); //Using ref would help to retain timer value between component re-renders.

const handleInput = (e) => {
const {
target: { value = '' },
} = e;
setInputValue(value);
if (autoSaveTimer.current) {
//If user inputs before the specified delay has ended then cancel perviously saved timer
clearTimeout(autoSaveTimer.current);
}
setIsSaving(true);
autoSaveTimer.current = setTimeout(() => {
sessionStorage.setItem('draft', value);
clearTimeout(autoSaveTimer.current);
setIsSaving(false);
}, SAVE_AFTER_MS);
};
return (
<div>
<h1>Auto-save Implementation</h1>
<span class="alignText">
<p>Draft Status: </p>
<p class={isSaving ? 'orangeText' : 'greenText'}>
{isSaving ? 'Saving... ' : 'Saved'}
</p>
</span>
<CustomInput value={inputValue} onChange={handleInput} />
<span class="alignText">
<p>Saved draft to storage: </p>
<p>{sessionStorage.getItem('draft')}</p>
</span>
</div>
);
}
//CustomInput.js
import React from 'react';
import styles from './CustomInput.module.css';
const CustomInput = ({
type = 'text',
placeholder = 'Enter text',
onChange,
value = '',
...props
}) => {
return (
<input
type={type}
placeholder={placeholder}
onChange={onChange}
value={value}
className={styles.inputRoot}
{...props}
/>
);
};
export default CustomInput;

• In App.jsempfängt die Funktion handleInput den Benutzereingabewert und aktualisiert die Zustandsvariable inputValue .
• Wir haben eine Variable autoSaveTimer (die eine Referenz ist ) in unserer funktionalen App-Komponente verwendet, um den Wert des Zeitgebers zwischen den erneuten Renderings der Komponenten beizubehalten (Vorkenntnisse von React sind erforderlich, um diesen Punkt zu verstehen).
• Immer wenn der Benutzer einen Wert eingibt, prüft handleInput , ob ein autoSaveTimer- Timeout gesetzt ist. Wenn ja, brechen Sie diese Zeitüberschreitung ab und legen Sie eine neue Zeitüberschreitung fest, die eine Rückruffunktion auslöst, nachdem SAVE_AFTER_MS Millisekunden vergangen sind.

() => {
sessionStorage.setItem('draft', value);
clearTimeout(autoSaveTimer.current);
setIsSaving(false);
}

PS Wenn Ihnen der Inhalt gefallen hat, halten Sie Ihre Klatschen nicht zurück. Wenn Sie Fragen / Vorschläge haben, können Sie diese gerne in den Kommentaren unten hinzufügen.

Vielen Dank fürs Lesen.