Web应用中NSUserDefaults/SharedPreferences的等价实现方案是什么？

Web端存在完全对等的原生实现，也有对应不同场景的行业通用最佳实践，具体如下：

1. 原生对等实现：localStorage #

localStorage是所有现代浏览器都原生支持的持久化键值对存储API，和移动端两大平台的存储方案定位完全匹配：仅用于存储小体积、非敏感的非复杂业务数据，默认会永久保留（除非用户主动清理站点数据或浏览器缓存）。

核心特性 #

• 单站点存储上限普遍为5MB，完全满足用户偏好、基础配置类数据的存储需求
• 同步读写，API极简，上手成本几乎为0
• 仅支持字符串类型存储，非字符串类型需要自行做序列化/反序列化处理

常用操作示例 #

// 存储基础类型数据
localStorage.setItem('dark_mode', '1')

// 读取基础类型数据
const enableDarkMode = localStorage.getItem('dark_mode') === '1'

// 存储对象类型数据
const userPref = { language: 'zh-CN', fontSize: 16 }
localStorage.setItem('user_preference', JSON.stringify(userPref))

// 读取对象类型数据
const savedPref = JSON.parse(localStorage.getItem('user_preference') || '{}')

// 删除单条数据
localStorage.removeItem('dark_mode')

// 清空当前站点所有localStorage数据
localStorage.clear()

注意事项 #

• 绝对不要存储敏感数据：localStorage是明文存储，浏览器控制台可直接读取，也极易被XSS攻击获取，密码、身份凭证、个人隐私类数据禁止存入
• 不要存储过大体积数据：同步读写逻辑会阻塞主线程，数据量过大会直接导致页面卡顿
• 如果需要跨设备同步配置，建议将数据同步存储到服务端，localStorage仅作为本地缓存使用，避免用户清理浏览器数据或者换设备后配置丢失

2. 扩展场景最佳实践 #

如果你的存储需求超出了localStorage的能力范围，可根据场景选择对应方案：

• 仅需要临时会话存储，关闭标签页就自动失效：使用sessionStorage，API和localStorage完全一致，生命周期仅绑定当前标签页会话
• 需要存储更大体积的结构化数据、需要索引查询、事务操作等数据库能力：使用浏览器原生IndexedDB，单站点存储上限可达到数百MB甚至更高，异步读写不会阻塞主线程，适合复杂离线存储场景。如果觉得原生API过于繁琐，可以使用第三方封装库降低使用门槛。

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