# aiv367-browser-config

**Repository Path**: aiv367/aiv367-browser-config

## Basic Information

- **Project Name**: aiv367-browser-config
- **Description**: 通过浏览器本地存储（localStorage）存储用户设置，实现用户前端持久化功能。通常应用于带有用户设置功能的web系统。比如：软件设置，皮肤设置，页面大小设置等这类的功能。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-06-30
- **Last Updated**: 2023-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Library

## README

# aiv367-browser-config

#### 介绍
通过浏览器本地存储（localStorage）存储用户设置，实现用户前端数据持久化功能。通常应用于带有用户设置功能的web系统。比如：软件设置，皮肤设置，页面大小设置等这类的功能。

配置模块采用 默认设置 和 用户设置 两部分，默认设置配置在开发代码中，用户设置会保存到本地存储中。实际开发过程中，也可以将用户配置一同保存到服务端存储。

#### 安装
```
npm i aiv367-browser-config --save
```

#### 示例
ES6 Module:
```js
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
})
```



一般开发时可以在外层再封装个模块，见如下:

```js
// src/commonents/config.js
import config from 'aiv367-browser-config';

config.setting.localStorageName = 'myConfig';
config.setting.defaultConfig = {
    lang: 'zh-cn'
};

export default config;
```

#### 文档
```js
// 基本设置
config.setting = {
	localStorageName: 'appConfig',
	defaultConfig: {}
}

// 获取配置
// type = merge: 用户配置和默认配置融合结果 | user：用户配置 | default：默认配置
config.get(type = 'merge');

// 设置配置
config.set(obj);

// 重置默认配置（清除本地用户配置）
config.reset();

```