页面跳转再返回时原有页面数据的保存

前言：在用户跳转下一个页面并返回的情况下，有些时候需要不掉接口进行数据渲染，或者需要保留某个参数，则需要在跳转页面前对所需要的数据进行保存。

对页面链接跳转后返回的内容进行保存，好用的有两种方法（个人觉得）。

一、保存在input框中

input 框里面的值在界面跳转时会保留下来（好像只限于type=text的情况），而且只有在界面回退时input框才会显示之前的值。

原理：这是因为 autocomplete属性 默认值是 on，即默认开启，它的作用是把输入框以前的输入记录显示出来。

反之，如果不希望浏览器保留以前输入的内容，只要给对应的 input 输入框加上以下参数：  autocomplete="off"

操作：

1、先弄一个隐藏域，然后把input框放进去

2、把数据都用一个js对象或数组保存下来，界面跳转前放到input里面，这里推荐把数据用json的格式存储，取的时候直接把json转成对象就好了。

3、加载页面时，判断隐藏域中的input框是否有值，如果有值，把值处理后放到界面上展示并同样把数据用js对象保留下来（因为可能下次跳转还会用到）；没有值，就按照新跳转到该界面的情况处理。

注意：微信打开网页时的处理略有不同，需要在界面跳转时加上延时函数。因为界面跳转时，有可能数据还没放到input里面就已经跳转界面了，导致input里面并没有保存数据

二、放在浏览器的存储当中

1、cookie 

但因为cookie保存的数据大小有限制：每个域的Cookie不得超过50个，每个域的字节数不得超过4093个字节（即大约4MB）。也就是说，所有cookie的大小不应超过4093字节。

所以不建议用cookie, 对于会话ID跟踪或只有几个KB可用。

2、localStorage

localStorage  较常用  大小限制：每个域5MB，

具体用法：

//存值
localStorage.setItem("logoNum", JSON.stringify(logoNum));

//取值
logoNum = JSON.parse(localStorage.getItem("logoNum"));

 

总：这两种各有优缺点，有一个问题是用input框时回退页面会刷新（忘了具体情况了，之前记录有这个问题），好似和操作方式有关：

在回退至上一页面时，无论android还是ios，如果是通过手机自带的底部返回按钮，回退页面会刷新，但是如果是快捷方式，如滑屏返回，回退页面就不会刷新。谷歌浏览器回退页面会刷新。