代码拉取完成,页面将自动刷新
通过浏览器本地存储(localStorage)存储用户设置,实现用户前端数据持久化功能。通常应用于带有用户设置功能的web系统。比如:软件设置,皮肤设置,页面大小设置等这类的功能。
配置模块采用 默认设置 和 用户设置 两部分,默认设置配置在开发代码中,用户设置会保存到本地存储中。实际开发过程中,也可以将用户配置一同保存到服务端存储。
npm i aiv367-browser-config --save
ES6 Module:
import config from 'aiv367-browser-config';
// 设置保存到本地存储的主键值,默认是appConfig
config.setting.localStorageName = 'myConfig';
// 默认设置数据,根据自己业务需求定义内部数据
config.setting.defaultConfig = {
lang: 'zh-cn',
app: {
name: 'xxx 管理系统',
skin: 'default',
zoom: 1
},
dataset: {
gender: [
{value: 0, label: '男'},
{value: 1, label: '女'},
{value: 2, label: '其它'}
]
}
};
//修改设置(存储到本地)
config.set({lang: 'en'});
config.get();
/**
返回下面数据
{
lang: 'en',
app: {
name: 'xxx 管理系统',
skin: 'default',
zoom: 1
},
dataset: {
gender: [
{value: 0, label: '男'},
{value: 1, label: '女'},
{value: 2, label: '其它'},
]
}
}
其中保存到本地存储的数据是
{lang: 'en'}
*/
config.set({
dataset: genter[
{value: 0, label: '雄'},
{value: 1, label: '雌'}
]
});
config.get();
/**
返回下面数据
{
lang: 'en',
app: {
name: 'xxx 管理系统',
skin: 'default',
zoom: 1
},
dataset: {
gender: [
{value: 0, label: '雄'},
{value: 1, label: '雌'}
]
}
}
其中保存到本地存储的数据是
{
lang: 'en',
dataset: {
gender: [
{value: 0, label: '雄'},
{value: 1, label: '雌'}
]
}
}
*/
// 删除用户设置(user)中的设置
config.remove(userConfig => {
delete userConfig.lang
})
一般开发时可以在外层再封装个模块,见如下:
// src/commonents/config.js
import config from 'aiv367-browser-config';
config.setting.localStorageName = 'myConfig';
config.setting.defaultConfig = {
lang: 'zh-cn'
};
export default config;
// 基本设置
config.setting = {
localStorageName: 'appConfig',
defaultConfig: {}
}
// 获取配置
// type = merge: 用户配置和默认配置融合结果 | user:用户配置 | default:默认配置
config.get(type = 'merge');
// 设置配置
config.set(obj);
// 重置默认配置(清除本地用户配置)
config.reset();
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。