使用 ReactJS 存储和编辑数据

Question

I am building an application using ReactJS. I am trying to find out how to store data and to edit it. I tried to store it on my computer with 'fs, 'browserify-fs' but it didn't work. Should I use express, or is there any other alternatives ?

Answer 1

If you are using React you are operating in the browser. Your option for storage is in local storage. This is explained here .

Examples of code are:

// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();

Note this is stored in the browser and can be easily cleared. You are going to realize that you need a back end solution. This is a server you can send requests to which has an API (a place you send requests to) which executes some form of operation (normally CRUD - Create Read Update Delete via a REST endpoint or GRAPHQL) to serve you back the data you are requesting from a database (MySQL, Postgres, MongoDB). This is a whole different discussion.

To store an array in local storage you will need to make it a string via JSON.stringify . An example would be:

localStorage.setItem("array", JSON.stringify(array));

In developer tools in Chrome you can go to Application -> Storage -> Local Storage and see what is saved. Here is an example:

Answer 2

If you want to share the data along multiple clients you should use server-side solution or if you just want to save the data for a client only you could use client-side solution provided by @diesel .

Create your own web-server

You need to create web server and a database to store your data. Database is used to store data. You could use: MySQL, PostgreSQL, SQLite3, MongoDB, ... You also need to create web service to make secure database calls.

To create web server you could use Express.js to write your web server easily.

Headless Content Management Systems (abbr: CMS)

If you don't want to spent time on creating your own web-server you could install a headless CMS to read/write your data using api endpoints provided by CMSs. Here's list of headless CMS softwares: headlesscms.org . I tried strapi which has lots of features you might need.

Here's some strapi features:

• Open-source
• Model builder
• Extensible (plugin support)
• Content editor (eg: to edit articles)
• and many more

Firebase

If you don't want to spend your time on installing CMS software to your server and maintaining it regularly you could use Database service provided by Google Firebase . It is also feature rich too. Here's some features supported by Firebase.

• NoSQL Database (to store your data)
• Authentication (to authenticate users)
• Storage (to store files)
• Functions (to write serverless functions )
• Machine Learning
• and many more