npm 包 data-provider-temporary 使用教程

前言

在前端开发过程中,我们经常需要将请求到的数据存储在本地,在后续开发过程中调用本地存储的数据而不用再次请求服务器。而传统的本地存储方法比如 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


猜你喜欢

  • npm 包 generator-tal 使用教程

    在前端开发中,需要进行大量的重复性工作,例如项目初始化、目录搭建、代码结构规范等等。为了减少这些繁琐的操作,我们可以使用 Yeoman 工具,而 generator-tal 就是这样一个由 TAL 团...

    3 年前
  • npm 包 emp-ebooks-reader 使用教程

    引言 EMP(Enterprise Management Platform)是百度推出的一套企业级前端解决方案,提供了很多有用的工具和库,其中 emp-ebooks-reader 就是其中之一。

    3 年前
  • npm 包 generator-vue-ts-starter 使用教程

    前言 在前端开发中,使用生成器(generator)工具可以提高我们的开发效率,减少重复性的工作,特别是在使用一些框架的时候,生成器更是不可或缺的工具之一。在 Vue 的开发中,generator-v...

    3 年前
  • npm包@jdists/swig使用教程

    简介 @jdists/swig是一个基于Swig语法的JavaScript模板引擎,它可以在Node.js环境中运行。它具有类似于Django的模板语法,提供高效的模板渲染,减少模板引用成本。

    3 年前
  • npm 包 angular-base-service 使用教程

    前言 在开发 Web 前端应用时,我们经常需要使用一些公共的服务组件来方便我们实现业务逻辑。这里我们将介绍一种名为 angular-base-service 的 npm 包,它提供了一些基础的服务组件...

    3 年前
  • npm 包 hast-to-snabbdom 使用教程

    什么是npm npm (Node Package Manager)是Node.js的包管理工具,由于Node.js的高速发展,npm也成为了目前最大的软件注册库。开发人员可以通过npm获取和分发包,也...

    3 年前
  • npm 包 instasham 使用教程

    Instasham 是一款 Node.js 的 npm 包,它能够通过 Instagram API 获取图片信息,并提供了许多丰富的配置选项。在本篇文章中,我们将学习如何使用 Instasham 包,...

    3 年前
  • npm 包 resume-maker 使用教程

    简介 resume-maker 是一款可以帮助你快速创建个人简历的 npm 包。它提供了丰富的模板选项,简单易用,支持多个格式导出(如 PDF、HTML),让你的简历不再单调无味,更好地展现自己的技能...

    3 年前
  • npm 包 oe-lighthouse 使用教程

    前言 oe-lighthouse 是一款基于 Lighthouse 的性能评估工具。在现代 Web 应用中,性能是至关重要的一环。评估并优化 Web 应用的性能,可以大大提高用户体验,因此掌握 oe-...

    3 年前
  • npm 包 syg-throttle 使用教程

    前言 前端开发中,我们经常需要对一些高频率触发的事件进行节流处理,比如页面滚动、窗口大小改变等。针对这些需求,我们可以借助第三方库来实现节流处理。本文将介绍一个 npm 包 syg-throttle,...

    3 年前
  • npm 包 zafiro-validators 使用教程

    在前端开发过程中,表单验证是一个非常重要的部分。为了方便进行表单验证,我们可以使用 npm 包 zafiro-validators,它提供了各种常见的表单验证函数。

    3 年前
  • npm 包 mycron 使用教程

    什么是 mycron? mycron 是一个基于 Node.js 实现的定时任务管理工具。通过 mycron,你可以非常方便地创建、删除、查看和暂停定时任务,同时也提供了可定制化的任务超时处理、任务日...

    3 年前
  • npm 包 envarify 使用教程

    什么是 envarify? envarify 是一个 npm 包,它可以在 JavaScript 或 TypeScript 项目中,将环境变量从 process.env 注入到代码中,以便在代码中读取...

    3 年前
  • npm 包 splitwise 使用教程

    splitwise 是一个可以将一个数组分成多个相等的数组的 npm 包。在前端开发中,我们经常需要将一个数组拆成多个部分,以便进行一些批处理或者分页操作,这时使用 splitwise 就能很方便地实...

    3 年前
  • npm 包 graph-node-js 使用教程

    在前端开发中,数据可视化是一个非常重要的部分。而数据可视化所使用的图表,通常需要一个图形库来完成。在这里,我们将介绍一个非常好用的 npm 包 - graph-node-js。

    3 年前
  • npm 包 yanxxit-reskit 使用教程

    前言 如果您是前端工程师,您可能已经听说过 yanxxit-reskit,这是一个有用的 npm 包,可以帮助您快速搭建一个前端项目,并提供了一些工具和库。本文将介绍 yanxxit-reskit 的...

    3 年前
  • npm 包 config-x 使用教程

    随着前端项目越来越复杂,我们需要一个更好的方法来管理我们的项目配置。这时,npm 包 config-x 就非常有用了。它提供了一个简单易用的方法来管理配置信息,并且支持多个环境、多个配置文件等高级特性...

    3 年前
  • npm 包 isit-code-pennock 使用教程

    在前端开发中,我们经常需要对文本进行各种判断。isit-code-pennock 是一个 npm 包,用于检测文本是否为编程代码。 本文将介绍如何使用 isit-code-pennock 包,并提供示...

    3 年前
  • npm 包 ember-theme-changer-slawomir 使用教程

    前言 随着前端技术的发展,越来越多的开发者利用 npm 包来提升开发效率,其中一个比较常见的用法就是使用现有的组件库或主题库。而本篇文章要介绍的是一个名为 ember-theme-changer-sl...

    3 年前
  • npm 包 htmltoamp 使用教程

    在前端开发领域,常常需要将 HTML 页面转换为 AMP (Accelerated Mobile Pages)页面,这样可以提高页面加载速度和提升用户体验。然而手动编写 AMP 页面比较繁琐,需要遵循...

    3 年前

相关推荐

    暂无文章