localStorage封装代码

localStorage封装

JSON.stringfy()和JSON.parse()

JSON.stringfy(): 将 JS 对象转化为 JSON 字符串。

javascript 复制代码
const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"John","age":30}

JSON.parse(): 将 JSON 字符串转化为 JS 对象,键值都必须使用双引号包裹。

javascript 复制代码
const jsonString = '{"name":"John","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj); // { name: 'John', age: 30 }

常用场景:

  1. 让 localStorage / sessionStorage 可以存储对象。
    localStorage / sessionStorage默认只能存储字符串,实际开发中,我们往往需要存储的数据多为对象类型,此时我们就可以在存储时利用 JSON.stringify() 将对象转为字符串,而在取缓存时,只需 JSON.parse() 转回对象即可。
  2. 实现对象深拷贝。
  3. 与后端 API 通信的时候,通常会接收到 JSON 格式的响应,JSON.parse() 可以将其解析为 JavaScript 对象,方便在客户端进行处理。

localStorage

封装:

javascript 复制代码
export class LocalStorage {
  static read = (key: string) => {
    const readObj = window?.localStorage?.getItem(key);
    try {
      return JSON.parse(readObj);
    } catch (err) {
      console.log(`READ from localStorage "${key}" - `, err);
    }
  };

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  static write = (key: string, value: any) => {
    window?.localStorage?.setItem(key, JSON.stringify(value));
  };

  static remove = (key: string) => {
    window?.localStorage?.removeItem(key);
  };
}

封装作用:

  1. localStorage 只能存字符串类型的数据,在存取的时候封装了 JS 对象和字符串之间转换。
  2. 抽象了操作:通过静态方法的形式,将对存储的读取、写入和删除操作进行了抽象和封装,使得调用方可以直接通过类的静态方法来进行操作,而无需关心底层的实现细节。提高了代码的可读性和可维护性,使得代码结构更加清晰,易于理解和维护。
  3. 提供了异常处理:在读取数据时,对 JSON 解析可能出现的异常进行了捕获和处理,并输出错误日志,避免了因为数据格式不正确而导致的程序崩溃或异常情况。

使用:

javascript 复制代码
export enum EStorageKey {
  JOINED_TOUR = 'JOINED_TOUR',
}

const storageJoinedTours = LocalStorage.read(EStorageKey.JOINED_TOUR);
相关推荐
晓得迷路了18 分钟前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师21 分钟前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder23 分钟前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
学前端搞口饭吃30 分钟前
React props的使用
前端·javascript·react.js
灵感__idea1 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛1 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒1 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As33100101 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱1 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖1 小时前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js