您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 544人已围观

简介 JS项目中对本地存储进行二次的封装的实现_javascript技巧_

前言

平时在开发的中，发现身边同事在使用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本地存储二次封装内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Vue实现悬浮框自由移动+录音功能的示例代码_vue.js_

下一篇：Vue 服务端渲染SSR示例详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网