sessionStorage 应用在项目需求中和注意事项

用法

  • 保存数据语法:
  sessionStorage.setItem("key", "value");
  • 读取数据语法:
var lastname = sessionStorage.getItem("key");
  • 删除指定键的数据语法:
sessionStorage.removeItem("key");
  • 删除所有数据:
sessionStorage.clear();

项目需求

项目中,有列表页,列表页中有搜索栏。列表页中还有新建,编辑等等跳转的页面。
现在需要在新建或编辑后,返回列表页后搜索栏中仍然有之前所填写的内容。

实现思路

1.在新建或编辑跳转前,保存当前的内容到sessionStorage
2.因为点击新建/编辑完成后会默认跳转回之前的列表页
当进入列表页时,获取之前存入的sessionStorage
3.获取到sessionStorage后,立即将其删除

后来发现如果点击导航栏进行跳转页面,会取到当前的sessionStorage。解决办法就是在导航栏的点击事件中加清除sessionStorage的操作。

更好的回填解决办法

更好的办法,我觉得就是把新建和编辑写成弹窗modal的样式,不进行跳转页面,这样既省了页面,也避免了因为需求导致的问题。前提是项目的需求允许进行这样的新建和编辑。

注意的问题!!!!

sessionStorage只能存字符串
所以在存对象的的时候要使用:

sessionStorage.setItem('seachPanel',JSON.stringify(this.seachPanel));

取的时候再转换一下:

JSON.parse(sessionStorage.getItem('seachPanel'))

猜你喜欢

转载自blog.csdn.net/weixin_44296432/article/details/101194164
今日推荐