sessionStorage实现草稿数据存入和读取

实现一个功能

表单编辑的时候可以存入 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~

关注我获取更多前端资源和经验分享
在这里插入图片描述

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

发布了94 篇原创文章 · 获赞 194 · 访问量 36万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览