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

Question

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

我使用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;

Answer 1

您正在寻找的是会话存储。参考here。

会话存储特定于选项卡（会话），而本地存储特定于站点。
另外，我希望您知道存储大小限制（猜它是 5 MB）。