npm 包 data-provider-temporary 使用教程

阅读时长 4 分钟读完

前言

在前端开发过程中,我们经常需要将请求到的数据存储在本地,在后续开发过程中调用本地存储的数据而不用再次请求服务器。而传统的本地存储方法比如 localStorage 或者 cookie 存储,可能会由于存储空间不足或者存储数据过期导致无法存储想要的数据。而 data-provider-temporary 就是一款 npm 包,专门用于将临时数据存储在本地。

安装

使用方法

-- -------------------- ---- -------
------ --------------------- ---- -------------------------

----- --------------------- - --- -----------------------

-- ----
-------------------------------- ------- ----- -- - ---- --------
-- ----
----- ---- - --------------------------------
----------------- -- --- ------- ----- -- - ---- -------
-- ----
-----------------------------------

利用 DataProviderTemporary() 可以创建一个实例 dataProviderTemporary,以供我们对数据的存储、调用、删除等操作。

API

dataProviderTemporary.set(key, value, expTime)

保存数据到本地存储

  • key : {string} 键
  • value : {object} 值
  • expTime : {number} 过期时间,可选。单位为毫秒,默认为 86400000(1 天)

dataProviderTemporary.get(key)

获取本地存储中指定的数据

  • key : {string} 键

返回值:本地存储中该 key 对应的值,若该 key 对应的值不存在或者已过期,则返回 undefined

dataProviderTemporary.remove(key)

删除本地存储中指定的数据

  • key : {string} 键

dataProviderTemporary.clear()

删除本地存储中所有的数据

dataProviderTemporary.size()

获取本地存储中数据的数量

返回值:本地存储中数据的数量

深度学习

data-provider-temporary 完整的源码分为两个模块,分别是 DataProviderTemporary 和 Storage 两个类。

其中 DataProviderTemporary 类是我们日常开发中主要使用的类,其底层实现就是调用 Storage 类中的方法实现数据存储、调用和删除等操作。

而 Storage 类是用于管理本地存储的,它封装了浏览器中不同的存储方式(localStorage、sessionStorage、cookie),提供了统一的 API,方便我们在不同的场景下选择不同的本地存储方式。

另外,data-provider-temporary 还实现了一个类似于浏览器中的事件机制,在值失效、过期等情况下可以及时的更新/删除本地存储的数据。

指导意义

data-provider-temporary 作为一个轻量级的 npm 包,实现了本地数据存储、调用、删除等基础操作,并且还提供了过期数据的自动删除功能,对于一些轻量级的应用来说非常的实用。

虽然我们在实际开发中可能会选择一些更加规范、专业的存储方案,比如关系型数据库或者缓存数据库等,但是在一些个人或者小团队的开发中,data-provider-temporary 这种小巧的解决方案可以帮我们快速的解决一些常见的问题,并且避免了为选择解决方案而浪费时间的情况发生。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005692d81e8991b448e4b8c

纠错
反馈