目录前言定义恒量的键名下层实现上层调用总结前言 平时在开发的中,发现身边同事在使用localStorage和sessionStorage的时候,喜欢在代码里面直接调用,举个的栗子:
平时在开发的中,发现身边同事在使用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()
}
这里我觉得我们将下层实现与上层使用的逻辑拆分开了,符合单一职责原则
,逻辑更清晰。
到此这篇关于JS项目中对本地存储进行二次的封装的文章就介绍到这了,更多相关js本地存储二次封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JS项目中对本地存储进行二次的封装的实现
本文链接: https://lsjlt.com/news/153976.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0