Javascript 刷新页面时清除上下文值(来自状态)

Javascript 刷新页面时清除上下文值(来自状态),javascript,reactjs,react-hooks,context-api,Javascript,Reactjs,React Hooks,Context Api,我有一个react应用程序,我使用上下文API作为其中的状态管理。我从服务器获取一个特定的值,将其分配给一个组件状态,然后将其存储为上下文值。但是,问题是,每当页面刷新和重新加载时,上下文值都会被清除,因为前面提到的状态丢失。即使页面重新加载,是否有方法存储并保留此值?除了本地存储,还有其他方法吗 非常感谢您的帮助。当您清除浏览器的某个页面时,您最终会清除与该页面相关的所有数据(不包括本地存储和缓存数据) 因此,在接收数据或关闭页面之前,需要使用本地存储 此外,对于某些任务,您可以使用浏览器中的

我有一个react应用程序,我使用上下文API作为其中的状态管理。我从服务器获取一个特定的值,将其分配给一个组件状态,然后将其存储为上下文值。但是,问题是,每当页面刷新和重新加载时,上下文值都会被清除,因为前面提到的状态丢失。即使页面重新加载,是否有方法存储并保留此值?除了本地存储,还有其他方法吗


非常感谢您的帮助。

当您清除浏览器的某个页面时,您最终会清除与该页面相关的所有数据(不包括本地存储和缓存数据)

因此,在接收数据或关闭页面之前,需要使用本地存储


此外,对于某些任务,您可以使用浏览器中的DB存储复杂数据。下面的示例是一个自定义挂钩,它使用存储API获取和保存值。它的工作原理类似于
useState
hook,但使用
keyName
字符串指定存储get中的键名并在中设置值

使用这个钩子,您的上下文提供程序组件可以在用户的设备上永久地获取和保存它的值

import { useState, useEffect } from 'react'

const useLocalStorage = keyName => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(keyName);
    try {
      const parsedValue = JSON.parse(storedValue);
      return parsedValue;
    } catch(error) {
      return storedValue;
    }
  });

  useEffect(() => {
    const stringifiedValue = JSON.stringify(value);
    localStorage.setItem(keyName, stringifiedValue);
  }, [value]);

  return [value, setValue];
};

export default useLocalStorage
用法示例:

import useLocalStorage from './useLocalStorage';

const Component () => {
  const [value, setValue] = useLocalStorage('user');
  ...
};

除了本地存储,还有其他方法吗?我想可能还有其他方法。但是,本地存储仍然可以正常工作。