网页里经常要把数据存在用户本地，登录凭证、编辑草稿、界面设置、离线缓存的内容，都离不开本地存储。浏览器自带的 localStorage 只能存字符串、容量有限，还是同步接口，数据一多会卡页面；IndexedDB 容量大，但原生接口写起来很啰嗦，光建表和查询就能劝退不少人。下面这几款库把本地存储包了一层更顺手的接口，用起来省事很多。
四款库分别解决什么
localforage 提供和 localStorage 几乎一样的读写接口，底层自动在 IndexedDB、WebSQL 和 localStorage 之间选择，能直接存对象、数组和二进制数据，不用手动做序列化，老项目想升级存储方案往往改几行就能切过来。Dexie.js 把 IndexedDB 复杂的原生接口封装成了直观的查询写法，能建表、定义索引、做条件查询、排序分页和批量操作，还支持事务和版本升级迁移，适合存大量结构化数据。idb-keyval 把 IndexedDB 简化成几个键值操作函数，存取删除几行代码搞定，体积非常小。Store.js 对本地存储做了统一封装，自动兼容不同浏览器，支持过期时间和命名空间。
本地存储能拿来做什么
比较典型的用法是草稿自动保存。用户在编辑框里写了东西，每隔几秒存一次，不小心关掉页面再打开，内容还在，这个体验很加分。再就是把不常变的接口数据缓存在本地，打开页面先拿缓存渲染，网络请求回来再更新，首屏明显更快。还有一些界面设置，比如主题、语言、列表的显示方式，存本地就不用每次进来重新选。这些都是纯前端的活，不需要后端接口配合。
用之前要想清楚的事
本地存储存在用户自己的设备上，清缓存、换浏览器、换设备数据就没了，所以只能放「丢了也不致命」的数据，重要内容还是得同步到服务端。另外别把敏感信息明文存在本地，令牌这类东西至少要谨慎处理，别给 XSS 攻击留机会。还有容量问题，localStorage 通常只有几兆，存多了会写不进去，要存大数据就选 IndexedDB 这条路线，用 Dexie.js 或 localforage 都能兜住。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。四款库互相独立、不依赖任何框架，用 script 标签引入即可，也支持模块化引入。选型上，想无痛替换 localStorage 用 localforage，要存大量数据做复杂查询用 Dexie.js，只存几个键值用 idb-keyval，要兼容老浏览器用 Store.js。每个目录都附带了说明文档和许可文件。
本地存储的价值在于让页面记住东西，用户不用每次都从头开始，这种连贯感对留存帮助不小。动手前先分清哪些数据必须联网、哪些可以只放本地，别把该上云的留在浏览器里，也别把临时的东西搞得兴师动众。这四款加起来一百多 K，按需引入几乎不占体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容