如何设置 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）。

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

How can I set a localStorage variable to match the page that it belongs to?

javascript

reactjs

react-hooks

local-storage

tinymce