前端记录并保持用户输入

最新推荐文章于 2023-09-09 14:06:00 发布

zy_whynot

最新推荐文章于 2023-09-09 14:06:00 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

zy_whynot

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端记录并保持用户输入

最近接到这样的一个需求：在A页面用户可以在输入框修改内容，在用户还没店家保存按钮时离开A页面跑到B页面，当用户再次返回到A页面时，直接显示用户刚才输入还未保存的内容，几用户不需要再次输入。前端缓存数据的几种方式：cookie、localStorage、sessionStoragecookie：可以记录前端数据，传到后端，可用于前后端保持会话localStorage和sessionStor...
复制链接

扫一扫