前端记录并保持用户输入

最近接到这样的一个需求:
在A页面用户可以在输入框修改内容,在用户还没店家保存按钮时离开A页面跑到B页面,当用户再次返回到A页面时,直接显示用户刚才输入还未保存的内容,几用户不需要再次输入。

前端缓存数据的几种方式:
cookie、localStorage、sessionStorage
cookie:可以记录前端数据,传到后端,可用于前后端保持会话
localStorage和sessionStorage仅仅是把数据缓存在前端,不用向后端传输。

实现此功能的关键在于找到备份数据、恢复数据、更新数据(或者删除数据)的时机。
备份数据:在用户点击跳转到B页面时备份数据;
恢复数据:A页面加载时从sessionStorage中取出数据,恢复
删除数据:用户退出A页面时删除数据

<script type="text/javascript">
var ud=localStorage.getItem('ud');
var uc=localStorage.getItem('uc');
var un=localStorage.getItem('un');
function initvar()
{
var edit1=document.getElementById("udate");
var edit2=document.getElementById("ucust");
var edit3=document.getElementById("uname");
    edit1.value=ud;
edit2.value=uc;
edit3.value=un;
}
 
function setvar()
{
var edit1=document.getElementById("udate");
var edit2=document.getElementById("ucust");
var edit3=document.getElementById("uname");
 
localStorage.setItem('ud',edit1.value);
localStorage.setItem('uc',edit2.value);
localStorage.setItem('un',edit3.value);
}
</script>
<body onload="initvar()" onunload="setvar()">

我用sessionStorage记录数据的,需要注意的是只能保存字符串,其他数据类型需要序列化:

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符  
var obj = JSON.parse(data); //由JSON字符串转换为JSON对象  

具体可以参考:sessionstorage中存储JSON数据

发布了47 篇原创文章 · 获赞 0 · 访问量 2161
展开阅读全文

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

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览