返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS项目中对本地存储进行二次的封装的实现
  • 506
分享到

JS项目中对本地存储进行二次的封装的实现

2024-04-02 19:04:59 506人浏览 安东尼
摘要

目录前言定义恒量的键名下层实现上层调用总结前言 平时在开发的中,发现身边同事在使用localStorage和sessionStorage的时候,喜欢在代码里面直接调用,举个的栗子:

前言

平时在开发的中,发现身边同事在使用localStoragesessionStorage的时候,喜欢在代码里面直接调用,举个的栗子:

function login() {
    //...请求
    const userInfo = {userId: 123, userName: '张三'}
    sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
}
function getUserInfo() {
    return jsON.parse(sessionStorage.getItem('userInfo'))
}

并不是觉得直接调用不好,但总觉得这种写法不够语义化,于是将其进行封装,这里参考了后端java同事的实体类的逻辑。

定义恒量的键名

这里我们将要使用到的key存储下来,新建一个叫constant-storage.js的文件,对外暴露一些key的键名,也方便后期统一修改,这里因为都是恒量,所以名称我们都用大写表示。

export const USER_INFO = 'userInfo'

下层实现

这里我们开始定义处理localStoragesessionStorage的类,首先给这个类定义基本的存储方法,setgetclear,对最基本的逻辑进行一个封装,这里用sessionStorage做个例子:

class Session {
  constructor() {
    this.store = window.sessionStorage
  }
  set(key, value) {
    this.store.setItem(key, value)
  }
  get(key) {
    return this.store.getItem(key)
  }
  clear(key) {
    this.store.removeItem(key)
  }
  clearAll() {
    this.store.clear()
  }
}

然后我们在开始封装一些业务功能,例如存取用户信息userInfo,从恒量中取出key,再将这个类,实例化暴露出去供外部调用。

import { USER_INFO } from './constant-storage'
class Session {
  constructor() {
    this.store = window.sessionStorage
  }
  set(key, value) {
    this.store.setItem(key, value)
  }
  get(key) {
    return this.store.getItem(key)
  }
  clear(key) {
    this.store.removeItem(key)
  }
  clearAll() {
    this.store.clear()
  }

  // 用户信息
  getUserInfo() {
    const userInfo = this.get(USER_INFO)
    return userInfo ? JSON.parse(userInfo) : null
  }
  setUserInfo(userInfo) {
    this.set(USER_INFO, JSON.stringify(userInfo))
  }
  clearUserInfo() {
    this.clear(USER_INFO)
  }
}

const session = new Session()

export default session

上层调用

引入我们暴露的实例,再回头看看我们直接对用户信息的存储操作。

import session from './session'
function login() {
    //...请求
    const userInfo = {userId: 123, userName: '张三'}
    session.setUserInfo(userInfo)
}
function getUserInfo() {
    return session.getUserInfo()
}

总结

这里我觉得我们将下层实现与上层使用的逻辑拆分开了,符合单一职责原则,逻辑更清晰。

  • 上层无需关心底层的实现逻辑,只需要在合适的时机调用,自己只要专注于业务逻辑就好。(我不希望去纠结于sessionStorage与JSON的序列化逻辑,我只希望我可以方便的存储的数据,也可以方便的获取数据)
  • 下层也无需关心上层的业务逻辑,只提供实现的方法,供外部调用即可。(我不希望纠结于你的业务,我能满足你的要求,你不要管我怎么存储数据,怎么对数据进行处理,至于我怎么实现,那是我自己的事情)

到此这篇关于JS项目中对本地存储进行二次的封装的文章就介绍到这了,更多相关js本地存储二次封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS项目中对本地存储进行二次的封装的实现

本文链接: https://lsjlt.com/news/153976.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS项目中对本地存储进行二次的封装的实现
    目录前言定义恒量的键名下层实现上层调用总结前言 平时在开发的中,发现身边同事在使用localStorage和sessionStorage的时候,喜欢在代码里面直接调用,举个的栗子: ...
    99+
    2024-04-02
  • JS项目中如何对本地存储进行二次封装
    今天小编给大家分享一下JS项目中如何对本地存储进行二次封装的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。前言平时在开发的中,...
    99+
    2023-07-02
  • 项目中Axios二次封装的示例分析
    这篇文章主要介绍项目中Axios二次封装的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.为什么做封装?方便代码整体调用、对请求做公共处理、个性化定制2.别人已经封装了很多,为什么不直接修改使用?封装思路不...
    99+
    2023-06-15
  • vue-cli对element-ui组件进行二次封装的实战记录
    目录为什么要element对进行二次封装?如何对element对进行二次封装?总结为什么要element对进行二次封装? 1.element-ui组件的部分样式不满足当前项目的需求。...
    99+
    2024-04-02
  • Flutter本地存储之基本的键值对存储怎么实现
    这篇文章主要介绍“Flutter本地存储之基本的键值对存储怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Flutter本地存储之基本的键值对存储怎么实现”文章能帮助大家解决问题。前言在原生的...
    99+
    2023-07-05
  • Vue2项目中对百度地图的封装使用详解
    目录需求知识点实现打点控件封装代码总览代码总结 百度地图的使用: vue项目,有个 vue-baidu-map 可以用,但是好久不更新了。 React项目,百度官...
    99+
    2024-04-02
  • Flutter中网络框架dio的二次封装怎么实现
    这篇文章主要介绍“Flutter中网络框架dio的二次封装怎么实现”,在日常操作中,相信很多人在Flutter中网络框架dio的二次封装怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter中网...
    99+
    2023-06-30
  • Windows 上的 Git 存储:如何在 Python 项目中进行有效的版本控制?
    版本控制是软件开发过程中的一个重要环节,它可以帮助开发者记录代码的变化和协作开发。Git 是一个广泛使用的分布式版本控制系统,它可以帮助开发者进行代码管理、版本控制和协作开发。在 Windows 上使用 Git 存储,可以让 Python...
    99+
    2023-07-07
    存储 git windows
  • Vue中的Strorage本地化存储怎么实现
    本文小编为大家详细介绍“Vue中的Strorage本地化存储怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中的Strorage本地化存储怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Sto...
    99+
    2023-06-30
  • vue项目打包之后在本地运行的实现方法
    目录vue项目打包后在本地运行项目打包后无法运行的问题vue项目打包后在本地运行 vue打包之后如果直接启动index.html文件的话就会出现报错 Refused to apply...
    99+
    2024-04-02
  • spring boot对敏感信息进行加解密的项目实现
    我们使用jasypt最新版本对敏感信息进行加解密。 1.在项目pom文件中加入如下依赖: <dependency> <groupId&...
    99+
    2023-05-17
    springboot敏感信息加解密 springboot敏感信息加密
  • Springboot项目保存本地系统日志文件的实现方法
    背景:我们都知道springboot默认日志是打印在控制台中的,不会以文件的形式进行保存。那么日后系统上线肯定是有需要对日志进行定位分析问题的,那么如何实现将控制台输出的日志保存起来...
    99+
    2024-04-02
  • Android开发----实现登录注册页面(创建本地数据库,对注册的账户密码进行存储)
    实现登录注册页面(创建本地数据库,对注册的账户密码进行存储) 写在前面: 本文实现了登录注册页面的开发,创建了本地数据库,存储注册的账户密码。注册账户为手机号,对账户为手机号进行了正则化验证。登录成功...
    99+
    2023-10-21
    数据库 android
  • Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
    本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现,分享给大家,具体如下: 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存...
    99+
    2024-04-02
  • 微信二次开发中使用Java如何实现封装各类型的消息
    本篇文章给大家分享的是有关微信二次开发中使用Java如何实现封装各类型的消息,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。第一步:找到com.wtz.message.respo...
    99+
    2023-05-31
    java 微信二次开发 封装
  • Android项目实现短信的发送、接收和对短信进行拦截
    说实话,关于Android中对短信的一些相关操作是一个比较入门的东西。那我现在还要来写这一篇博客的原因只是因为现在开发中有相关内容,而又想将这些东西分享给更多的人来学习,同时在...
    99+
    2022-06-06
    Android
  • SQL Server中怎么实现数据行批量插入脚本的存储
    这篇文章给大家介绍SQL Server中怎么实现数据行批量插入脚本的存储,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。本存储运行于SQL Server 2005或以上版本,T-SQL代...
    99+
    2024-04-02
  • 如何编写Shell脚本实现对文件中的行、单词、字符进行迭代输出
    这篇文章主要介绍“如何编写Shell脚本实现对文件中的行、单词、字符进行迭代输出”,在日常操作中,相信很多人在如何编写Shell脚本实现对文件中的行、单词、字符进行迭代输出问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-06-09
  • 如何进行vue项目中的支付功能实现(微信支付和支付宝支付)
    如何进行vue项目中的支付功能实现(微信支付和支付宝支付),针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。项目中常见的支付方式    支付宝支付...
    99+
    2023-06-22
  • JS基于设计模式中单例模式实现封装对数据增删改查功能的示例分析
    这篇文章给大家分享的是有关JS基于设计模式中单例模式实现封装对数据增删改查功能的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。单例模式单例模式的核心结构中只包含一个被称为...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作