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

更新时间：2022年07月09日 15:25:17 作者：皮皮盐

这篇文章主要介绍了JS项目中对本地存储进行二次的封装,这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示，需要的朋友可以参考下

前言

平时在开发的中，发现身边同事在使用localStorage和sessionStorage的时候，喜欢在代码里面直接调用，举个的栗子：

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'

下层实现

这里我们开始定义处理localStorage和sessionStorage的类，首先给这个类定义基本的存储方法，set 、get、clear，对最基本的逻辑进行一个封装，这里用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本地存储二次封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

利用JavaScript实现一个日期范围选择器
日期范围选择器是一个常见的Web应用功能,它允许用户选择一个日期范围,本文我们将使用JavaScript来实现这个功能,感兴趣的小伙伴可以了解下
2024-01-01
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
前支持javascript调试功能的工具越来越多，主要分为ie和firefox两大阵营。其他浏览器上很难调试javascript。而Javascript Debug Toolkit解决了这个问题，可能在所有支持ajax请求的浏览器上调试javascript.
2008-12-12
window.onload使用指南
我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片,下面我们就来详细探讨下window.onload的用法
2015-09-09
给事件响应函数传参数的四种方式小结
这篇文章主要介绍了给事件响应函数传参数的四种方式。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JS获取下拉框显示值和判断单选按钮的方法
这篇文章主要介绍了JS获取下拉框显示值和判断单选按钮的方法,实例分析了javascript针对html下拉框及单选按钮的相关操作技巧,需要的朋友可以参考下
2015-07-07
原生js实现自定义消息提示框
这篇文章主要为大家详细介绍了原生js实现自定义消息提示框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
js实现多图和单图上传显示
这篇文章主要为大家详细介绍了js实现多图和单图上传显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
webpack中的filename 和 chunkFilename 的区别实例解析
filename 指列在 entry 中,打包后输出的文件的名称,chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称,这篇文章主要介绍了webpack中的filename 和 chunkFilename 的区别实例解析,需要的朋友可以参考下
2023-11-11
JavaScript实现获取网络通信进度
这篇文章主要为大家详细介绍了如何使用Fetch API和XMLHttpRequest（XHR）来执行网络请求,并重点说明如何获取这两种方法的网络请求进度,感兴趣的可以了解下
2023-12-12
关于JS中match() 和 exec() 返回值和属性的测试
这篇文章主要介绍了关于JS中match() 和 exec() 返回值和属性的测试的相关资料,需要的朋友可以参考下
2016-03-03