React Lecture: Storing Diary Data in Web Storage

Today’s web applications are grappling with how to efficiently manage and store user data. In this tutorial, we will explore how to store diary data in web storage using React. Web storage is a convenient and effective way to store data in the browser, allowing for more data to be stored than with Flash or cookies, and enabling easy reading and writing of data without the need for server requests.

1. What is Web Storage?

Web storage has two main types: Session Storage and Local Storage. While these two have different data storage methods, they provide the same API.

  • Local Storage: Allows for permanent data storage. The data does not disappear even if the user closes the browser or refreshes the page.
  • Session Storage: Data is only stored for the duration of the browser session. The data disappears when the user closes the tab or exits the browser.

Using local storage is the most suitable option for storing diary data, as the diary entries created by the user need to be preserved.

2. Creating a Diary App Using React and Web Storage

In this section, we will create a simple diary-writing application. The application will allow users to write diaries, save them in local storage, and retrieve the saved diaries. We will manage the state using React’s `useState` and `useEffect` hooks, and synchronize the data with web storage.

2.1 Project Setup

npx create-react-app diary-app

After creating the React app with the command above, navigate into the created directory.

cd diary-app

2.2 Creating Necessary Components

Here is the main component structure:

  • App.js
  • DiaryForm.js
  • DiaryList.js

2.3 DiaryForm Component

The DiaryForm component provides a form for users to input their diary entries.

import React, { useState, useEffect } from 'react';

const DiaryForm = ({ onSubmit }) => {
    const [diaryText, setDiaryText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(diaryText);
        setDiaryText('');
    }

    return (
        

            
            
        

    );
};

export default DiaryForm;

2.4 DiaryList Component

The DiaryList component displays the saved diary entries.

import React from 'react';

const DiaryList = ({ diaries }) => {
    return (
        

            
Saved Diaries

            
    
                {diaries.map((diary, index) => (
                    
  • {diary}
    • 
                ))}
            

        

    );
};

export default DiaryList;

2.5 App Component

The App component manages the overall state of the application and interacts with web storage.

import React, { useState, useEffect } from 'react';
import DiaryForm from './DiaryForm';
import DiaryList from './DiaryList';

const App = () => {
    const [diaries, setDiaries] = useState([]);

    useEffect(() => {
        const savedDiaries = localStorage.getItem('diaries');
        if (savedDiaries) {
            setDiaries(JSON.parse(savedDiaries));
        }
    }, []);

    const addDiary = (diary) => {
        const updatedDiaries = [...diaries, diary];
        setDiaries(updatedDiaries);
        localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
    };

    return (
        

            
Diary Application

            
            
        

    );
};

export default App;

3. Code Explanation

3.1 State Management

In the code above, we manage the state of diary data (`diaries`) using `useState`. When a user inputs a new diary entry, the `addDiary` function is called to update the state and saves it to local storage.

3.2 Using Web Storage

To save diaries in local storage, we use `localStorage.setItem` and `localStorage.getItem` methods. When the application first renders, we use `useEffect` to retrieve the saved diaries.

4. Running the Application

Once all the setup is complete, you can run the application with the command below.

npm start

You can check the diary application by accessing http://localhost:3000 in the browser.

5. Future Improvements

In addition to the basic features above, the following improvements can be considered:

  • Add diary editing and deletion features
  • Display the date and time of diary entries
  • Apply various UI styling
  • Implement functionality to search or filter diaries

6. Conclusion

In this tutorial, we built a simple application that saves and manages diary data using web storage with React. By using web storage, we can conveniently save user data, thereby enhancing the user experience of the application. Now you can create your own diary application!

7. Related Resources