Json 如何高效地存储客户发票数据并按月份、日期或名称进行筛选

我正在做一个发票管理系统。我将使用react js。我必须存储发票详细信息，如卖方名称、客户名称、日期、价格、产品等。存储和检索数据的最佳和最有效方式是什么。我需要数据来显示特定月份销售业绩的概览，因此我需要按月份甚至日期进行筛选

---

Ps：刚从web上的数据存储开始，所以请友好一些。

在react应用程序中有两种管理状态的方法，最简单的方法是组件状态（使用this.state of使用钩子和useState钩子来管理类组件）

如果您的应用程序很复杂，我建议您使用或使用该库

下面的示例将让您开始学习（假设您在本地存储中有JSON对象，您可以阅读有关浏览器本地存储的更多信息）

函数应用程序（）{
const[state，setState]=React.useState（{}）；
React.useffect（（）=>{
异步函数加载（）{
const data=localStorage.getItem（'invoice'）；
如果（数据）{
//本地存储中存储了字符串，请在设置状态之前解析它们。
setState（JSON.parse（data））；
}
}
加载（）；
}, []);
返回(
{state？.id}
);
}

请记住，您可以创建一个自定义钩子，从本地存储读取所需的参数（如果未找到，则为默认值），并在不同的组件中重复使用它

function useLocalStorage(key) {
  const [item, setItem] = useState();
  
  useEffect(() => {
    async function load() {
      const data = localStorage.getItem(key);
      
      if (data) {
        setItem(JSON.parse(data));
      }
    }
    
    load():
  }, [key]);
  
  return item;
}


function App() {
  const id = useLocalStorage('id');
  const balance= useLocalStorage('balance');
  
  return (
    <div>
     <span>{id}</span>
     <span>{balance}</span>
    </div>
  );
}

函数useLocalStorage（键）{
const[item，setItem]=useState（）；
useffect（（）=>{
异步函数加载（）{
const data=localStorage.getItem（键）；
如果（数据）{
setItem（JSON.parse（data））；
}
}
加载（）：
}，[关键]；
退货项目；
}
函数App（）{
const id=useLocalStorage（'id'）；
const balance=useLocalStorage（'balance'）；
返回(
{id}
{平衡}
);
}

您想继续吗？我的意思是，每次重新加载数据都将消失或保存？数据将被保存

function useLocalStorage(key) {
  const [item, setItem] = useState();
  
  useEffect(() => {
    async function load() {
      const data = localStorage.getItem(key);
      
      if (data) {
        setItem(JSON.parse(data));
      }
    }
    
    load():
  }, [key]);
  
  return item;
}


function App() {
  const id = useLocalStorage('id');
  const balance= useLocalStorage('balance');
  
  return (
    <div>
     <span>{id}</span>
     <span>{balance}</span>
    </div>
  );
}