【Vue3.0实战逐步深入系列】保存问卷记录到localStorage并基于elementui的table组件实现历史记录的展示功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。今天我们继续来完善我们的问卷调查功能。昨天我们已经为问卷添加了数据有效性校验功能。从问卷主题配置到问卷数据有效性校验再到问卷的保存和提交，整个问卷系统已经初具雏形逐步完善了，但仍然还欠缺许多功能比如按角色登录，后台管理，提交记录展示等等。别急，既然是逐步深入系列我们就一步步慢慢来。今天就将实现问卷提交记录保存及展示功能。

保存提交记录

为了操作方便我们就不借助后台数据库了，依然使用本地存储localStorage进行历史记录的保存，拢共分为三大步：

• 首先来分析一下我们要保存的信息：
  • 提交记录的唯一标识字段id，提交记录的标题title，填写问卷的用户user，提交时间time，以及问卷的具体信息question
  • 其中id作为唯一标识，为了方便我们就把它做成自增类型，并且将每次自增后的最大值也保存到localStorage中
  • 最后将所有字段封装成一个对象保存在localStorage中
• 这里已经多次用到了localStorage，那么必然就会涉及到多个不同的key值，为了方便维护，我们把这些key单独存到一个文件constants.js中
  • Question：值为“QUESTION”，用于保存每次填写问卷的临时记录
  • MaxId： 值为“MAXID”，用于保存自增后的最大ID值
  • History：值为“HISTORY”，用于保存每次提交的记录
• 在submit方法中添加保存提交记录的逻辑
  • 首先根据maxid在localStorage中拿到当前的最大id值，拿到id后先进行自增操作，然后再重新存回到localStorage中
  • 组装提交记录对象，如：{ id: newId, title:QUESTION：第${newId}次提交记录, user:‘Yannis’, time: new Date().toLocaleString(), question: JSON.stringify(result) }，（注意在保存问卷结果时需要进行JSON转换一下）
  • 根据key History从localStorage中拿到已经保存的提交记录histories。这里从localStorage中拿到的保存结果进行JSON转换后应该是一个数组类型。
  • 将上面组装好的提交记录对象push到数组histories中
  • 将数组histories进行JSON转换后重新存回到localStorage中

//constants.js
export default{
   
	MaxId:"MAXID",
	Question:"QUESTION",
	History:"HISTORY"
}

const submit = () => {
   
	// ...省略
	let maxId = localStorage.getItem(constants.MaxId);
	let newId = maxId ? ++maxId: 1;
	localStorage.setItem(constants.MaxId, newId);
	const records ={
   
		id: newId,
		title:`QUESTION：第${
     newId}次提交记录`,
		user:'Yannis',
		time: new Date().toLocaleString(),
		question: JSON.stringify(result)</