使用 SSr 和 Sequelize 处理 Next.js 14 中的本地存储

Question

我在我的项目中使用 Next.js 14。该网站的功能之一是将产品添加到收藏夹，其中产品 ID 存储在 localStorage 中。

在 Page.jsx 文件（位于 /favorites）中，我有以下代码：

import { getFavoriteProperties } from '@/database/getProperties'

export default async function Favorites() {
    let favoriteProperties = [];

    if (typeof window !== "undefined") {
        favoriteProperties = JSON.parse(localStorage.getItem('FAVORITE_PROPERTIES')) || [];
        console.log(favoriteProperties);
    }
      
    const properties = await getFavoriteProperties(favoriteProperties);
    console.log(properties);

    return (
      <div>
        <h1>Favorites</h1>
      </div>
    )
}

如您所见，代码的问题是我需要检索存储在 localStorage 中的值，但这不起作用，因为 Page.jsx 是在服务器端（SSr）执行的。

显而易见的解决方案是在文件顶部添加“use client”指令，但问题是函数 **getFavoriteProperties **（从 localStorage 接收 ID）用于从以下位置获取信息数据库使用Sequelize，需要在服务器端执行。

我在这个问题上被困了几个小时，似乎找不到明确的解决方案。

任何想法或建议，我们将不胜感激。

我已经尝试了论坛和互联网上的许多解决方案，即使是那些我知道可能行不通的解决方案。我的大部分尝试都集中在解耦客户端逻辑以从 localStorage 检索 ID，然后将它们发送到 getFavoriteProperties 函数。

Answer 1

而是使用

localStorage.getItem('FAVORITE_PROPERTIES')

，使用此 

globalThis.localStorage.getItem('FAVORITE_PROPERTIES')

 来获取本地存储值。