实现一个功能：

表单编辑的时候可以存入 sessionStorage中，如果没有点击保存，下一次或者刷新进入页面的时候可以读取session中的值填入表单中。

使用的技术点当然是操作

sessionStorage

,主要用到以下几个API。

sessionStorage.setItem(key, value) // 设置session
sessionStorage.getItem(key) // 获取session
sessionStorage.removeItem(key) // 删除key对应的session
sessionStorage.clear() //全部删除

结合实际情况：使用的是redux数据,而且我是在子组件的onChange事件中触发，编辑框既可以是新增也可以是编辑，还允许用户选择是否显示草稿，，，

实现：
在change事件中，需要设置session,key值不能随意定，我是使用 url中的参数的，还加上uerId，避免同一会话框登录不同用户所出现的问题。

• 写入session

this.state.session =  'session' + this.props.authReducer.auth.userId + this.props.location.search；
sessionStorage.setItem(this.state.session, JSON.stringify({
    results: this.state.results
}));

表示在每一次change的时候，都会写入 session中。

• 读取session

const results = JSON.parse(sessionStorage.getItem(this.state.session));
// 更新到 state中
this.setState({ results });

这是基本的写入和读取。接下来是 用户可以选择是否显示草稿，设置那么就要在页面加载的时候判断此时的编辑页面是否有session存在，在compontentDidMount()中
设置一个状态值，用于判断 文本是否显示

if (sessionStorage.getItem(this.state.session)) {
   this.setState({ isDraft: true });
}

文本内容：

{
     this.state.isDraft ?
         <div>
             你有未保存的草稿，是否显示？
             <Button type="primary" onClick={this.showDraft}>是</Button>
             <Button style={{ marginLeft:3 }} onClick={this.cancelDraft}>否</Button>
         </div>
         : null
 }

点击是，将会把session内容写入，点击否，删除session

• 取消

// 取消显示 sessionStorage中的数据
    cancelDraft = () => {
        sessionStorage.removeItem(this.state.session);
        this.setState({ isDraft: false });
    }

• 显示

showDraft = () => {
	const results = JSON.parse(sessionStorage.getItem(this.state.session));
	// 更新到 state中
	this.setState({ 
		results,
		isDraft: false
	 });
}

基本的实现就是这样，其实API比较简单的，就是结合具体情况会有不同的值存储的问题出现，不要慌，都可以解决的~
over~

关注我获取更多前端资源和经验分享

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~