lz-storage-lib

浏览器缓存数据操作工具库

介绍

此库主要功能为：
根据传入的一个前缀值，在对浏览器缓存执行操作时，
自动匹配为对包含这个前缀值的数据进行操作

安装

// 使用 npm
npm i lz-storage-lib

// 使用 yarn
yarn add lz-storage-lib

配置使用

1、创建 prefixKey.js

// 设置缓存前缀值，string类型，默认为 scm_
const prefixKey = 'scm_'
export default prefixKey

2、创建 lzStorage.js

// 在 Vue 中使用
import Vue from 'vue'
import lzStorage from 'lz-storage-lib'
import prefixKey from './prefixKey'

// prefixKey 前缀值，string类型，默认 scm_

// reset 是否重置，boolean类型，默认 false。
// reset：true 设置为 true 时，不判断是否已初始化配置，直接重新生成新的缓存配置
Vue.use(lzStorage, { prefixKey, reset: true })

3、vue 主入口文件 main.js

// 在 vue主入口文件 main.js 中引入
import '@/storage/lzStorage'

4、创建 lzSessionStorage.js

import { install } from 'lz-storage-lib'
import prefixKey from './prefixKey'

if (!window.lzStorage || !window.lzStorage.LzSessionStorage) {
    install(null, { prefixKey })
}
let storage = window.lzStorage.LzSessionStorage

export default storage

5、创建 lzLocalStorage.js

import { install } from 'lz-storage-lib'
import prefixKey from './prefixKey'

if (!window.lzStorage || !window.lzStorage.LzLocalStorage) {
    install(null, { prefixKey })
}
let storage = window.lzStorage.LzLocalStorage

export default storage

6、创建 LzCookies.js

import { install } from 'lz-storage-lib'
import prefixKey from './prefixKey'

if (!window.lzStorage || !window.lzStorage.LzCookies) {
    install(null, { prefixKey })
}
let storage = window.lzStorage.LzCookies

export default storage

7、在页面中使用

// 使用 cookies 时
import LzCookies from '@/storage/LzCookies'
// 使用 localStorage 时
import LzLocalStorage from '@/storage/LzLocalStorage'
// 使用 sessionStorage 时
import LzSessionStorage from '@/storage/LzSessionStorage'

// 使用相关方法
LzCookies.xx()
LzLocalStorage.xx()
LzSessionStorage.xx()

文档

相同方法

lzLocalStorage，lzSessionStorage，lzCookies 都包含以下方法

/**
 * 设置数据
 * @param {string} key
 * @param {any} val
 */
set(key,val)

/**
 * 获取数据
 * @param {string} key
 */
get(key)

/**
 * 删除数据
 * @param {string} key
 */
remove(key)

/**
 * 获取所有key
 */
keys()

/**
 * 查找key
 */
findKey(key)

/**
 * 清空带有前缀值的数据
 * 注意：
 * lzSessionStorage 只会清除 sessionStorage 中所有带前缀值的数据
 * lzLocalStorage 只会清除 localStorage 中所有带前缀值的数据
 * lzCookies 只会清除 cookies 中所有带前缀值的数据
 */
clear()

/**
 * 清空当前缓存数据
 * 注意：
 * lzSessionStorage 只会清除所有 sessionStorage 数据
 * lzLocalStorage 只会清除所有 localStorage 数据
 * lzCookies 只会清除所有 cookies 数据
 */
clearAll()

不同方法

lzLocalStorage

// 设置 不加前缀的 localStorage
lzLocalStorage.setLocalStorage(key, val)

// 获取 不加前缀的 localStorage
lzLocalStorage.getLocalStorage(key)

// 删除 不加前缀的 localStorage
lzLocalStorage.removeLocalStorage(key)

lzSessionStorage

// 设置 不加前缀的 sessionStorage
lzSessionStorage.setSessionStorage(key, val)

// 获取 不加前缀的 sessionStorage
lzSessionStorage.getSessionStorage(key)

// 删除 不加前缀的 sessionStorage
lzSessionStorage.removeSessionStorage(key)

lzCookies

// 设置 不加前缀的 cookies
lzCookies.setCookie(key, val, ...rest)

// 获取 不加前缀的 cookies
lzCookies.getCookie(key, ...rest)

// 删除 不加前缀的 cookies
lzCookies.removeCookie(key)