前端记录并保持用户输入

最近接到这样的一个需求：
在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数据

来源：CSDN

作者：zy_whynot

链接：https://blog.csdn.net/zy_whynot/article/details/104010650

标签

var

前端

localstorage