frontendStore 前端储存工具
介绍
-
封装 localStorage 和 sessionStorage,方法个数及方法调用方式与原对象一致,setItem 方法提供额外过期时间传参,且兼容原对象方法存储的数据。
-
封装 cookie,提供多个方法调用,简化操作。
安装
-
npm i frontend-store
-
全局引入
<script src="https://unpkg.com/frontend-store/dist/index.js"></script>
暴露全局变量frontendStore
使用
import frontendStore from 'frontend-store'
// -- *storage* localStorage、sessionStorage用法一致 --
// key的类型都为string
frontendStore.localStorage.getItem(key)
// value: string | Record<string, any>
// expire?: number (过期时间戳:单位毫秒)
// frontendStore.localStorage.setItem('key', { name: '666' }, Date.now() + 1000 * 60 * 60 * 24)
frontendStore.localStorage.setItem(key, value, expire)
frontendStore.localStorage.removeItem(key)
frontendStore.localStorage.clear()
// -------------------------------------------
// *cookie*
// key的类型都为string
frontendStore.cookies.getItem(key)
// value: string
/*
* options:
* end?: number | string | Date
* domain?: string
* path?: string ()
* secure?: boolean (cookie 只会被 https 传输)
*/
/*
end
- 类型为number时,值为过期的秒数,永不过期为Infinity;
- 类型为string时,值为过期时间的 GMTString 格式;
- 类型为Date时,值为过期时间的 Date 对象;
- 如果没有定义则会在会话结束时过期。
path
- 例如 '/', '/mydir'。如果没有定义,默认为当前文档位置的路径。路径必须为绝对路径
domain
- 例如 'example.com','.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义,默认为当前文档位置的路径的域名部分。
secure
- cookie 只会被 https 传输。
*/
frontendStore.cookies.setItem(key, value, options)
frontendStore.cookies.removeItem(key)
frontendStore.cookies.hasItem(key)
frontendStore.cookies.keys()