我有一些关于上下文API和本地存储的一般问题困扰着我。
何时使用本地存储？、何时使用上下文 API，何时同时使用两者？
我知道要在刷新后保留数据，我需要本地存储或会话存储之类的东西，那么我是否完全放弃上下文 API 而将所有内容存储在本地存储中？ 这样我不仅可以存储数据，还可以保持刷新？ 一些见解将非常有帮助。
有哪些优点和缺点？
上下文 API 与本地存储是苹果与橙子的比较。
上下文 API 用于在组件树中共享状态。
上下文提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递 props。
本地存储用于在会话之间存储数据。
只读 localStorage 属性允许您访问文档源的存储对象;存储的数据跨浏览器会话保存。
正确的比较可能是本地存储与 Cookie，上下文 API 与状态管理库(不是真的，因为上下文不是状态管理工具(。
虽然您可以将所有内容存储在本地存储上(尽管它不可扩展且不可维护(，但它不会有用。
它不会有用，因为您无法在状态更改时通知您的组件，您需要使用任何 React 的 API。
通常，本地存储用于会话功能，例如保存用户设置，收藏夹主题，身份验证令牌等。
通常，您在应用程序启动时从本地存储读取一次，并使用自定义钩子在相关数据更改时更新其密钥。
以下是自定义钩子useLocalStorage有用配方：
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
console.log(error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = value => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}