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