JS项目中如何对本地存储进行二次封装

今天小编给大家分享一下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项目中如何对本地存储进行二次封装”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。