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'))