美文网首页
ts封装本地存储和会话存储

ts封装本地存储和会话存储

作者: 43e1f527c136 | 来源:发表于2023-02-16 21:03 被阅读0次

--封装本地存储和会话存储

--调用

--导入模块 import {storage} from ''

--使用本地.get 会话 .session.get

--ts

interface StorageInterface {

  //设置localStorage

  set: (key: string, value: any) => void;

  //获取localStorage,默认会自动转json

  get: (key: string, isJson?: boolean) => string | Record<any, any>;

  //是否含有key

  has: (key: string, isJson?: boolean) => boolean;

  //移除

  remove: (key: string) => void;

}

interface SessionStorageInterface extends StorageInterface {

  //提供session操作接口

  session: StorageInterface;

}

const storage: SessionStorageInterface = {} as SessionStorageInterface;

//加方法

const extend = (s: Storage): StorageInterface => {

  return {

    set(key, value) {

      if (typeof value == "object") {

        s.setItem(key, JSON.stringify(value));

      } else {

        s.setItem(key, value);

      }

      if (value == undefined || value == null) {

        s.removeItem(key);

      }

    },

    get(key, isJson = true) {

      const item = s.getItem(key) as string;

      try {

        if (isJson) {

          let ret =  JSON.parse(item);

          //JSON.parse 可以转基本类型,不报错。。。,所以这里判断一下

          if (typeof ret !== 'object') {

            return undefined;

          }

          return ret;

        }

      } catch (e) {

        //解析出错,则证明不是json字符串,返回undefined

        return undefined;

      }

      return item;

    },

    has(key,isJson=false) {

      return !!(this.get(key,isJson) as string | Record<any, any>);

    },

    remove: (key) => {

      s.removeItem(key);

    },

  };

};

Object.assign(storage, extend(window.localStorage));

Object.assign(storage, {

  session: extend(window.sessionStorage),

});

export default storage;

相关文章

  • JavaScript 存储对象

    Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)...

  • Storage 存储

    存储:分为本地存储 和 会话存储+++++++++在一定程度上解决了cookie 的不便利 本地存储 localS...

  • Storage 存储

    存储## 分为本地存储 和 会话存储在一定程度解决了cookie的不便利性 本地存储 localStorage 会...

  • cookie、sessionStorage和localStora

    localStorage(本地存储)和sessionStorage(会话存储)都是用来存储客户端临时信息的wind...

  • iOS程序员眼中的H5中的web存储

    web端的存储方式分为: 1.会话存储 sessionStorage 2.本地存储 locationStorage...

  • Web存储技术sessionStorage和localStora

    Web技术提供了sessionStorage(会话存储)和localStorage(本地缓存)两个存储对象来对网页...

  • 本地会话存储与设置sessionStorage

    本地会话存储与设置sessionStorage sessionStorage只能存储字符串类型数据,无法直接存储数...

  • 本地存储和会话存储 (JavaScript)

    检查您所在的任何页面。 单击应用程序。 单击存储,您将在那里看到本地存储和会话存储。[图片上传失败...(imag...

  • Vuex是什么?

    一、Vuex和本地存储的区别 1、sessionStorage方法针对一个 session 进行数据存储。(会话存...

  • 本地存储

    本地存储主要分为一个永久存储 localstorage和会话存储 sesstionStorage应用场景记住用户信...

网友评论

      本文标题:ts封装本地存储和会话存储

      本文链接:https://www.haomeiwen.com/subject/tttmkdtx.html