在前端开发中，存储在本地的数据处理是非常常见的需求。通常情况下，开发者需要自己编写代码来实现 localStorage 或者 sessionStorage。但是今天我们将介绍一种非常方便的 npm 包 —— handy-storage。
handy-storage 介绍
handy-storage 是一个用于浏览器端的本地存储包，能够帮助开发者快速便捷地存储和获取数据。它支持 localStorage 和 sessionStorage，并能够处理对象类型的数据。
安装 handy-storage
通过 npm 可以很方便地安装 handy-storage：
npm i handy-storage
安装完成之后，我们就可以愉快地使用它了。
handy-storage 的 API
我们来看看 handy-storage 的常用 API。
setValue(key, value, isSession = false)
设置键值对并保存到本地存储中。isSession 参数用来区分 localStorage 和 sessionStorage。
示例代码：
import handyStorage from 'handy-storage';
handyStorage.setValue('key', 'value'); // 默认为 localStorage
handyStorage.setValue('key', 'value', true); // 保存到 sessionStorage 中getValue(key, defaultValue = '')
根据 key 获取对应的 value。
示例代码：
import handyStorage from 'handy-storage';
const value = handyStorage.getValue('key'); // localStorage 中获取 key 对应的值
const value2 = handyStorage.getValue('key2', 'default value'); // 当 key2 不存在时，返回默认值 'default value'setObject(key, obj, isSession = false)
设置对象，并存储到本地存储中。isSession 参数用来区分 localStorage 和 sessionStorage。
示例代码：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ----- --- - - ----- ---------------- ------- ------- -- ----------------------------- ----- -- --- ------------ ----------------------------- ---- ------ -- --- -------------- -
getObject(key, defaultValue = {})
根据 key 获取对应的对象。
示例代码：
import handyStorage from 'handy-storage';
const obj = handyStorage.getObject('key'); // localStorage 中获取 key 对应的对象
const obj2 = handyStorage.getObject('key2', { name: 'default', author: 'default' }); // 当 key2 不存在时，返回默认值remove(key, isSession = false)
根据 key 删除对应的键值对。isSession 参数用来区分 localStorage 和 sessionStorage。
示例代码：
import handyStorage from 'handy-storage';
handyStorage.remove('key'); // 默认为 localStorage
handyStorage.remove('key', true); // 删除 sessionStorage 中 key 值对应的键值对clear(isSession = false)
清除整个本地存储。isSession 参数用来区分 localStorage 和 sessionStorage。
示例代码：
import handyStorage from 'handy-storage'; handyStorage.clear(); // 清除 localStorage handyStorage.clear(true); // 清除 sessionStorage
handy-storage 的一些示例
下面我们来看一些 handy-storage 的应用示例。
持久化存储用户设置
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ----- -------- - - --------- ----- --------- ---- -- -- ------ ---------------------------------- ---------- -- ------ ----- ------------ - -----------------------------------
在 sessionStorage 中存储临时游戏数据
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ----- -------- - - ------ -- ------ --- -- -- ------- -------------- - ----------------------------------- --------- ------ -- ------------ ----- --------- - ----------------------------------- ------ ----------------------- -- - ------ -- ------ --- -
总结
通过 handy-storage，我们可以非常方便地处理本地存储相关的需求，不用再自己编写复杂的逻辑代码，可大大提升开发效率。希望本篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96901