81：企业CRM客户系统：基于本地存储进行性能优化

为了减少服务器的请求压力，我们可以把从服务器获取的信息存储到客户端本地

但是存储的信息是明文存储，这样会导致本地信息的泄露不安全
此时我们更需要服务器的二次权限校验

本地存储解决方案：

[服务器存储]

• 数据库

• Redis缓存

• session (和客户端的cookie有关联)

【客户端本地存储】

访问客户端本地存储的信息，受浏览器、源的限制（信息存储在客户端的本地，物理磁盘的某个位置，但是信息都是经过加密或者编码过的，非专业人士无法编码）

ie浏览器中存储的一些信息，在谷歌浏览器中默认是无法获取到的 百度网站下存储的一些信息，在京东网站中也默认无法获取的。

**本地存储的信息是明文的，**所以需要严格保密的信息慎重存储到本地（加密 ）

• cookie

​ + H5提供的webStorage

​ - localStorage

​ - sessionStorage

​ + 本地数据库存储

​ - webSQL

​ - IndexedDB

cookie 和localstorge

1.cookie兼容大部分浏览器（包括ie6）,local storge是h5中新增的api,不兼容低版本的浏览器（例如：ie6-8）,在考虑兼容情况下只能用cookie

2.本地存储的cookie信息，在发送AJax请求的时候，会在请求头中自动携带，传递给服务器（cookie虽然是本地存储，但是总是在客户端和服务器端传来传去，但是localstorage是不会这么传递的）

3.cookie存储的内容比localstorage要小得多，一般同一个源下，cookie最多存储4kb,localstorge可以存储5MB( 所以存储一些代码信息或者一些数据信息，我们应该使用localstorage）

4.cookie不稳定，会被一些特殊情况给干掉（cookie本身是由生命周期的），例如：使用安全卫视软件或者浏览器本身自带的清理历史记录等功能清理电脑的时候，就容易把存储的cookie信息给干掉，但是目前为止，这些清理工具都清楚不掉Localstorage(localstorage是持久化保存在客户端本地，除非手动清除，没有生命周期的限制)

5.cookie可能会被禁用（例如浏览器的无痕浏览模式）

[localstorage和 sessionstorage]

1.localstorage是持久化存储到本地，而sessionstorage是会话存储，也就是页面关掉（刷新不算）当前存储的sessionstorage会被清除掉

sessionStorage.setItem('xxx','xxxx')

 localStoage.setItem('xxx','xxx')

注意：后台的session跟浏览器的sessionStorage一点关系都没有

强调：

优化，第一次从服务器获取数据，获取回来后，把数据存储到本地（LOCALSTORAGE）, 设订一个过期时间（例如可以设定在一分钟内，只要本地有数据，则不需要向服务器发送请求，减少单元时间内的服务器并发压力）
存储在客户端本地的信息不安全，尤其是权限信息，所以我们最好加密处理（主要是服务器做二次的权限校验）

// 校验是否登录
// axios.get('/user/login').then(result => {
// 	console.log(result);
// });
// 3.基于发布订阅管控获取基本信息后逐一做的事情
let $plan = $.Callbacks();
$plan.add( baseInfo =>{
	let $baseBox = $(".baseBox"),
		$baseBoxSpan = $baseBox.find('span'),
		$signout=$baseBox.find('a')
	$baseBoxSpan.html(`您好：${baseInfo.name}`)
	// 退出登录
	// 封装一下
	let handled = async type=> {
		if (type === 'CONFIRM') {
			let result = await axios.get('/user/signout')
			if (parseInt(result.code) !== 0) {
				alert('抱歉退出失败')
			}
			alert('退出成功，即将回到登录页面', {
				handled: () => {
					window.location.href = "login.html"
				}
			})
		}
	}
	$signout.click(() => {
		alert('您确定要退出登陆吗', {
			confirm: true,
			handled //键和值相同可以省略值
	  })
	})
})
$(async function () {
	//   校验当前用户是否登录
	let result = await axios.get('/user/login');
	if (parseInt(result.code) !== 0) {
		// 当前用户没有登陆
		alert('您当前还没有登录，请先登录', {
			handled: _ => {
				window.location.href = 'login.html';
			}
		})
	}

	// 2.获取当前用户的基本信息和权限信息
// 优化，第一次从服务器获取数据，获取回来后，把数据存储到本地（LOCALSTORAGE）,	设订一个过期时间（例如可以设定在一分钟内，只要本地有数据，则不需要向服务器发送请求，减少单元时间内的服务器并发压力）
	// 存储在客户端本地的信息不安全，尤其是权限信息，所以我们最好加密处理（主要是服务器做二次的权限校验）
	let baseInfo = localStorage.getItem('baseInfo');
	console.log(baseInfo);
	if (baseInfo) {
        let {time,data}=JSON.parse(baseInfo)
		if ((new Date().getTime() - time) < 60 * 1000) {
			// 数据没有过期，跳过
			$plan.fire(data)
			return
		}
	 	
	}
	
	let requestArr = [],
		results; //存储两个的结果
	requestArr.push(
		axios.get('/user/info').then(result => {
			if (parseInt(result.code) === 0) {
				return result.data
			}
			return Promise.reject()
		}))
	requestArr.push(
		// 直接解构赋值，因为是两个参数要用括号
		axios.get('/user/power').then(({code,power}) => {
			if (parseInt(code) === 0) {
				return power;
		  }
		}))
	results = await Promise.all(requestArr)
	results[0]['power'] = results[1]
	results = results[0]
    
	// 存储到客户端本地（存储到本地的信息都是字符串）
	localStorage.setItem('baseInfo', JSON.stringify({
		time: new Date().getTime(),
		data: results
	}))
//   通知计划表中的方法执行
	$plan.fire(results)
	
})
//  ajax串行 上一个请求完成，才能执行下一个请求（上一个请求的结果会对下一个请求的有影响）
// promise.then(_=>{}).then(_=>{}).。。
// await
// ajax并行，多个请求是同时发送的，每一个请求成功后做的事情互不影响
// 正常发布多个异步请求
// 需要请求都成功在统一处理事情，基于	promise.all即可解决