JavaScript로 자동 저장 구현

이 기사에서는 Javascript와 ReactJS를 사용하여 자동 저장 기능을 구현하는 방법을 살펴보겠습니다. 자동 저장 기능은 응용 프로그램이 사용자가 입력한 내용을 자동으로 저장하려고 할 때 편리합니다. 온라인 양식, Excel 등과 같은 응용 프로그램에는 이러한 자동 저장 기능이 필요합니다.

아래에 언급된 구현을 심층적으로 이해하려면 Javascript 및 React(v16)에 대한 기본 지식이 필요합니다.

단순화를 위해 여기에서는 온라인 코드 편집기 StackBlitz 를 사용하여 기본 ReactJS 프로젝트를 만들었습니다. 코드는 참조용으로 이 문서의 끝에 있습니다.

프로젝트 개요:

프로젝트는 아래와 같이 구현됩니다.

1. HTML 입력 요소 는 사용자 입력을 수신/기록하는 데 사용됩니다.
2. 사용자가 입력을 중단 하면 브라우저의 sessionStorage 를 사용하여 사용자 입력을 저장/저장합니다.

src/index.js루트 파일입니다 . 파일을 가져오고 src/App.js콘텐츠를 렌더링합니다.

src/App.js사용자 입력을 처리하고 콘텐츠를 브라우저의 sessionStorage 에 자동 저장하는 핵심 논리가 있습니다. src/App.js구성 요소를 가져오고 src/components/customInput/CustomInput.js사용자 입력을 받는 데 사용됩니다.

코드 구현:

프로젝트 폴더 구조 섹션 에서 언급했듯이 은 App.js사용자 입력( 에서 수신)을 처리 하고 콘텐츠를 sessionStorageCustomInput.js 에 저장(자동) 하는 핵심 구성 요소입니다.

//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;

• 에서 handleInput 함수는 사용자 입력 값을 수신하고 App.jsinputValue 상태 변수를 업데이트합니다.
• 우리는 기능적 App 구성 요소에서 변수 autoSaveTimer ( ref) 를 사용 하여 구성 요소 다시 렌더링 간에 타이머 값을 유지했습니다(이 점을 이해하려면 React에 대한 사전 지식이 필요합니다).
• 사용자가 값을 입력할 때마다 handleInput 은 autoSaveTimer 시간 제한이 설정되어 있는지 확인합니다 . 그렇다면 해당 시간 제한을 취소하고 SAVE_AFTER_MS 밀리초가 지난 후 콜백 기능을 실행하는 새 시간 제한을 설정하십시오.

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

PS 콘텐츠가 마음에 들었다면 박수를 쳐주세요. 질문/제안 사항이 있는 경우 아래 의견에 자유롭게 추가하십시오.

읽어 주셔서 감사합니다.