使用local storage与useContext存储认证令牌的对比及适用场景

嘿，很高兴你在React和React Native之间梳理这些基础概念！我来帮你拆解这个问题，分React（浏览器端）和React Native两部分说清楚，这样你能更清晰地把握两者的区别。

一、React（浏览器端）场景 #

1. 什么时候该用localStorage？ #

localStorage是浏览器提供的持久化存储方案，适合存这些类型的数据：

• 不需要频繁变动的轻量配置：比如用户的主题偏好（深色/浅色模式）、每页数据条数设置、语言选择等；
• 跨会话需要留存的标识：比如"记住我"的登录状态标记、已阅读过的弹窗记录；
• 非敏感的用户基础信息：比如用户名、头像地址（注意：绝对不能存密码、银行卡号这类敏感数据！）。

它的特点是：存储在磁盘上，浏览器刷新、重启后数据依然存在；同一域名下的页面共享数据；存储大小限制一般为5MB；只能存字符串，复杂对象需要用JSON.stringify()转换，读取时再用JSON.parse()解析。

2. useContext能不能替代localStorage？ #

绝对不能完全替代！
useContext是React提供的内存级全局状态管理工具，它的数据只存在于当前应用的运行会话中——一旦浏览器刷新、页面关闭，context里的所有数据都会被清空。

举个实际的例子：

• 如果你只用useContext存auth token，用户刷新页面后，context里的token就没了，应用会认为用户未登录，需要重新输入账号密码；
• 但如果把token同时存在localStorage里，在App组件初始化时（比如useEffect钩子中），从localStorage读取token并同步到context中，用户刷新页面后就能自动恢复登录状态，体验会好很多。

正确的搭配方式是：

• useContext负责应用运行时的全局状态分发（比如让各个组件能快速获取当前用户信息、token）；
• localStorage负责跨会话持久化这些需要留存的数据，作为状态的"持久化备份"。

二、React Native场景 #

1. 先明确：RN里没有localStorage！ #

React Native运行在原生设备环境中，没有浏览器的localStorage API，官方推荐的轻量持久化存储方案是@react-native-async-storage/async-storage（之前的AsyncStorage已被移至这个独立库）。它是异步的，底层在iOS基于NSUserDefaults/Keychain，Android基于SharedPreferences，作用和浏览器的localStorage类似。

2. 什么时候该用AsyncStorage？ #

和浏览器localStorage的适用场景一致：

• 持久化用户的App设置（比如推送通知开关、字体大小）；
• 存储auth token、用户基本信息，实现App重启后自动登录；
• 保存离线状态下需要用到的轻量数据（比如缓存的用户浏览记录）。

3. useContext在RN里能不能替代持久化存储？ #

和浏览器端一样，不能！RN的useContext同样是内存状态，当App被用户杀死、设备重启后，context里的数据会全部丢失。

正确的做法也是搭配使用：

• 应用启动时（比如根组件的useEffect中），调用AsyncStorage的异步方法读取持久化数据，然后更新到useContext中；
• 当用户信息、设置发生变化时（比如登录成功、修改主题），同时更新useContext的状态和AsyncStorage的存储，保证下次启动能恢复到最新状态。

三、共性与注意事项 #

共性 #

不管是React还是React Native，useContext都只是运行时的状态容器，不具备持久化能力；必须结合对应的持久化存储方案（浏览器localStorage/RN AsyncStorage），才能实现数据跨会话留存。

重要注意事项 #

• 不要用localStorage/AsyncStorage存储敏感数据！比如密码、支付信息等。浏览器端可以用sessionStorage（会话结束即销毁）或带HttpOnly属性的Cookie；RN端可以用react-native-keychain这类专门存储敏感信息的库。
• 如果你的应用状态逻辑复杂（比如多个组件频繁修改状态、状态之间有依赖关系），useContext可能不够灵活，可以搭配useReducer，或者使用Redux、Zustand等状态管理库——但这些库同样是内存状态，依然需要和持久化存储配合使用。

内容的提问来源于stack exchange，提问作者src2012