Next.js中实现单按钮仅加1分、最高分10且不禁用按钮的最优方案咨询

我正在用Next.js开发一个功能，现有10个按钮，初始分数为0。核心需求如下：

• 点击任意按钮仅能使分数增加1分（无论重复点击多少次）
• 分数最高上限为10分
• 全程不能禁用按钮

我目前想到两种实现思路，但拿不准是否合适，想请教更优方案：

我的两种初步方案 #

• 方案一：数据库存储按钮状态
  在数据库中存储10个按钮的ID及对应的0/1状态（0表示未触发加分，1表示已触发），每次点击按钮时请求数据库验证状态，符合条件则给分数+1。示例数据结构：[{btn_1:0}, {btn_2:1},..., {btn_7:0}, ...]
  存在的问题：会产生大量重复的数据库请求，效率不高。
• 方案二：LocalStorage存储+定期同步
  在LocalStorage中记录每个按钮的点击状态和当前分数，定期将数据同步到后端数据库。（我没使用过LocalStorage，但感觉这个思路可行🙂）
  疑问：不确定这种方案的可靠性，以及具体实现是否能满足需求。

寻求建议 #

请问以上两种方案是否可行？有没有更高效、可靠的实现思路？

内容的提问来源于stack exchange，提问作者JohnPix