您好,登录后才能下订单哦!
今天小编给大家分享一下JS项目中如何对本地存储进行二次封装的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
平时在开发的中,发现身边同事在使用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项目中如何对本地存储进行二次封装”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。