Javascript 如何设置localStorage变量以匹配它所属的页面？

我有以下用于在线科学实验室的组件

我正在使用

localStorage

，以防研究人员离开页面，然后试图返回。我希望

fossilText

留在文本编辑器中

问题是，编辑器有多个实例，因为它们可以处理多个条目和一次，而且有许多研究人员同时使用该应用程序

因此，我的

localStorage

数据变得混乱，最终与正确的页面不匹配

有没有办法设置localStorage，以便它知道它属于哪个实例

我试着设置

localStorage.setItem（'fossilId'，fossilId）

，但这也很糟糕

这是我的密码：

 const App = (props) => {
    const [fossilText, setFossilTextState] = useState(props.fossilText || "Fossil Text...");
    const [fossilId, setFossilIdState] = useState(props.fossilId);
    var rteContent = '';


    if (localStorage.getItem('fossilState')) {
        rteContent = localStorage.getItem('fossilState');
    } else {
        rteContent = fossilText;
    }

    const [fossilState, setFossilState] = useState(rteContent);

    useEffect(() => {
        localStorage.setItem('fossilState', fossilState)
    }, [fossilState]);



    const updateFossilText = (content) => {
        const request = axios.put(`/api/scienceFossil/${fossilId}/fossilText`, JSON.stringify(content), {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        setFossilState(content);
    }
    return (
        <Editor
            initialValue={rteContent}
            init={{
                selector: ".fossilText",
                menubar: 'file edit view insert format',
            }}
            value={fossilState}
            onEditorChange={updateFossilText}
        />
    )
}

export default App;

const-App=（道具）=>{
const[fossilText，setFossilTextState]=useState（props.fossilText | | |“化石文本…”）；
const[fossilId，setFossilIdState]=使用状态（props.fossilId）；
var-rteContent=''；
if（localStorage.getItem（'fossilState'））{
rteContent=localStorage.getItem（'fossilState'）；
}否则{
rteContent=fossilText；
}
const[fossilState，setFossilState]=使用状态（rteContent）；
useffect（（）=>{
setItem（'fossilState'，fossilState）
}，[化石状态]；
const updateFossilText=（内容）=>{
const request=axios.put（`/api/sciencefolsel/${fossilId}/fossilText`，JSON.stringify（content）{
标题：{
“内容类型”：“应用程序/json”
}
});
setFossilState（内容）；
}
返回(
)
}
导出默认应用程序；

您需要的是会话存储。参考资料

会话存储特定于选项卡（会话），而本地存储特定于站点。

---

另外，我希望您知道存储大小限制（估计是5 MB）。

您好，谢谢！我只需要在页面上的选项卡菜单之间存储文本数据。例如，如果它们位于“化石”选项卡上，然后单击“研究”，但再返回到“化石”…文本数据仍将存在。：）