小编Dan*_*mel的帖子

当用户关闭网站时如何保存用户会话信息

我正在尝试为网站构建用户重播会话功能,并且我正在使用rrweb库来做到这一点。

这个库的作用是在录制时:它捕获网页中的所有事件,我可以通过将它们存储在 an 中来保存这些事件,array当我想重播会话时,我只需将 传递array给重播函数即可函数处理会话重放。

目前,出于测试目的,我将此数组保存在 my 中sessionStorage,每次发出新事件时,我都会将array新事件推送到其中,然后array再次将其保存在 my 中,sessionStorage如下所示:

rrweb.record({
    emit(event) {
        const sessions = JSON.parse(sessionStorage.getItem('sessions')) || [];
        sessions.push(event);
        sessionStorage.setItem('sessions', JSON.stringify(sessions));
    },
});
Run Code Online (Sandbox Code Playgroud)

但是,对于生产,sessionStorage我不想将该数组保存在我的数组中,然后在每次发出新事件时更新它,而是想将该数组保存array在我的数据库中,并且我想调用将其保存array到我的数据库中的函数,无论何时用户logs out或当用户决定关闭网站时(例如按下按钮X)。

第一部分 - 当用户时logs out- 非常简单,我只需在按钮eventListener上添加一个logout,这是第二部分 - 当用户决定关闭网站时 - 这让我有些头痛。

我知道有这个beforeUnload事件,但是经过快速搜索后,我清楚地意识到它是不可靠的,所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站,这样我就可以触发一个async function将保存array到我的数据库。

javascript session-replay

6
推荐指数
2
解决办法
565
查看次数

由于 css 导入,React DatePicker 在 next.js 中无法工作

我正在尝试在项目中使用react-date-pickernext.js

我首先安装软件包:npm install react-date-picker

然后在我的_app.js文件中添加:

import "react-date-picker/dist/DatePicker.css";
import "react-calendar/dist/Calendar.css";
Run Code Online (Sandbox Code Playgroud)

然后在我的自定义组件之一中,我尝试使用日期选择器:

import DatePicker from "react-date-picker";

const [dateValue,setDateValue] = useState(new Date());

<DatePicker value={dateValue} onChange={setDateValue} />
Run Code Online (Sandbox Code Playgroud)

当我运行应用程序并尝试导航到包含日期选择器的页面时,出现以下错误: 在此输入图像描述

我已按照文档进行操作,但仍然收到错误,并且不知道如何修复它。

datepicker reactjs next.js

3
推荐指数
1
解决办法
8637
查看次数

使用 css 网格时将所有 div 居中并使它们高度相同

在我的 React 和 tailwindcss 项目中,我的组件之一中有以下代码片段:

<div className="container">
   <div className="grid grid-cols-4 gap-x-2 gap-y-4">
       {valueCards.map(
          (item,index) => (
             <div key={index}>
                 <ValuesCard description={item.description} isPrimary={index % 2 === 0} />
             </div> 
          )
        )}
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这将产生以下结果: 在此输入图像描述

我要寻找的是首先尝试使所有多余的 div 出现在行的中间,如下所示(请注意,我不介意使用纯 css 而不是 tailwindcss 来实现): 在此输入图像描述

我还希望所有卡片的高度都等于其中最大卡片的高度,即使该卡片不在同一行。

css grid css-grid

3
推荐指数
1
解决办法
342
查看次数