今天小编给大家分享一下业务层hooks怎么封装useSessionStorage的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
名称：useSessionStorage
功能开发过程中，需要进行数据的临时存储，正常情况下，使用localStorage或者 sessionStorage，存在于 window 对象中，使用场景不一样。
sessionStorage的生命周期是在浏览器关闭前，浏览器关闭后自动清理，页面刷新不会清理。
localStorage的生命周期是永久性的，存储的数据需要手动删除。
存储业务数据，登录会话内，使用sessionStorage。
需要持久化话的数据，比如token标记之类的可以使用localStorage，使用时需要谨慎对待，以及考虑清理时机。
获取本地存储 getCache
写入本地存储 setCache
设置用户缓存 setUserCache
获取用户缓存getUserCache
移除cookie removeCookies
计算
安全
数据库
网络和加速
企业服务
import Cookie from 'js-cookie';
/**
* 获取缓存数据
* @param {string} key
* @param {string} type: 缓存类型 'local'(默认) / cookie / session;
*/
function getCache(key, type = 'local') {
let data;
switch (type) {
case 'cookie':
data = Cookie.get(key);
break;
case 'session':
// eslint-disable-next-line no-case-declarations
let strS = sessionStorage.getItem(key);
try {
data = JSON.parse(strS);
} catch (e) {
data = strS;
}
break;
default:
// eslint-disable-next-line no-case-declarations
let strL = localStorage.getItem(key);
try {
data = JSON.parse(strL);
} catch (e) {
data = strL;
}
break;
}
return data;
}
/**
* 获取缓存数据
* @param {string} key
* @param {any} value
* @param {string} type: 缓存类型 'local'(默认) / cookie / session;
*/
function setCache(key, value, type = 'local') {
switch (type) {
case 'cookie':
Cookie.set(key, value, { expires: 7 });
break;
case 'session':
sessionStorage.setItem(key, JSON.stringify(value));
break;
default:
localStorage.setItem(key, JSON.stringify(value));
break;
}
}
/**
* 获取用户缓存
* @param {*} key
* @param {*} type
*/
function getUserCache(key, type = 'local') {
const id = getCache('userId', 'session');
if (!id) {
console.error('无法获取用户信息！');
return;
}
return getCache(`${id}-${key}`, type);
}
/**
* 设置用户缓存
* @param {*} key
* @param {*} value
* @param {*} type
*/
function setUserCache(key, value, type = 'local') {
const id = getCache('userId', 'session');
if (!id) {
console.error('无法获取用户信息！');
return;
}
return setCache(`${id}-${key}`, value, type);
}
function removeCookies(key) {
key && Cookie.remove(key);
}
export default {
getCache,
setCache,
getUserCache,
setUserCache,
removeCookies
};以上设计属于框架层，提供操作本地存储的能力，但是为什么业务侧需要封装hooks呢？
主要原因：
使用起来有点麻烦，需要import引入工具库，但是hooks使用也需要import引入，因为功能页面大部分引入的都是hooks，使用解构，代码量就会缩减，而且使用认知会减少，引入hooks即可，“你需要用到的都在hooks里面”
那我们开始设计
import { ref, Ref, isRef, watch as vueWatch } from "vue";
const storage = sessionStorage;
const defaultOptions = {
watch: true
}
/**
* 获取数据类型
* @param defaultValue
* @returns
*/
const getValueType = (defaultValue) => {
return defaultValue == null
? "any"
: typeof defaultValue === "boolean"
? "boolean"
: typeof defaultValue === "string"
? "string"
: typeof defaultValue === "object"
? "object"
: Array.isArray(defaultValue)
? "object"
: !Number.isNaN(defaultValue)
? "number"
: "any";
};
/**
* 按照类型格式数据的常量Map
*/
const TypeSerializers = {
boolean: {
read: (v) => (v != null ? v === "true" : null),
write: (v) => String(v),
},
object: {
read: (v) => (v ? JSON.parse(v) : null),
write: (v) => JSON.stringify(v),
},
number: {
read: (v) => (v != null ? Number.parseFloat(v) : null),
write: (v) => String(v),
},
any: {
read: (v) => (v != null && v !== "null" ? v : null),
write: (v) => String(v),
},
string: {
read: (v) => (v != null ? v : null),
write: (v) => String(v),
},
};
/**
* 缓存操作
*/
const useSessionStorage = (key, initialValue, options) => {
const { watch } = { ...defaultOptions, ...options };
const data = ref(null);
try {
if (initialValue !== undefined) {
data.value = isRef(initialValue) ? initialValue.value : initialValue;
} else {
data.value = JSON.parse(storage.getItem(key) || "{}");
}
} catch (error) {
console.log(error, "useLocalStorage初始化失败");
}
const type = getValueType(data.value);
// 判断类型取格式化方法
let serializer = TypeSerializers[type];
const setStorage = () => storage.setItem(key, serializer.write(data.value));
// 状态监听
if (watch) {
vueWatch(
data,
(newValue) => {
if (newValue === undefined || newValue === null) {
storage.removeItem(key);
return;
}
setStorage();
},
{
deep: true,
}
);
}
setStorage();
return data;
};
export default useSessionStorage;useSessionStorage接受一个key和一个value，导出一个响应式的state, 用户直接赋值state.value可自动修改本地sessionStorage。
不设置value可用于获取本地sessionStorage 例：useSessionStorage('useSessionStorage')
value等于undefined或者null可用于删除本地Storage 例：state.value = undefined;
const state = useSessionStorage(
key: string,
initialValue?: any,
options?: Options
);| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | sessionStorage存储键名 | any | - |
| initialValue | 初始值 | any | {} |
| options | 配置 | Options | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| watch | 是否实时修改sessionStorage | boolean | true |
| 参数 | 说明 | 类型 |
|---|---|---|
| state | 可以被修改的数据源 | Ref |
以上就是“业务层hooks怎么封装useSessionStorage”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
