慎用sessionStorage.clear()：一个由全局清理引发的Token丢失问题
今天下午，我正在全神贯注地编写代码，测试组的一位同事突然找到我，说我的页面在发送请求的时候没有携带token，导致api调用出错。
我：不可能，token都是前端统一携带的，我的页面并无特殊处理，怎么可能没有携带token？
妹子：可是我在测试的时候发现确实没有携带token。
我：你确定是我的页面吗？
妹子：是的，你可以现在就看一下。
于是我F12打开浏览器的开发者工具，来到我的页面查看网络请求，果然发现请求头中没有携带token。气氛一度十分尴尬…
我：稍等，容我检查一下。
妹子没说话，可能觉得我刚才不够信任她…
经过一番调试，发现的确是我的问题，我这个页面比较特殊，是类似一个用户向导的功能，共分为三个步骤，每个步骤对应独立的页面，而且每个页面都需要用户填写一些信息，除了第一步之外，其他的步骤都支持后退修改。所有的步骤都支持取消操作，表示用户放弃了本次操作。
为了支持在最后一个页面提交，我使用了sessionStorage来存储用户填写的信息，如果用户在某个页面点击了取消按钮，那么我会清空sessionStorage中的数据。问题就出在这个清空操作上，我用的是sessionStorage.clear()方法，这个方法会清空整个sessionStorage，而不仅仅是我这个页面存储的数据。
巧合的是，前几天开发登录功能的小伙伴刚刚把存储token的代码从localStorage改成了sessionStorage，导致我在清空sessionStorage的时候也把token给清空了。于是就产生了妹子所说的没有携带token的问题。
解决的办法也很简单，就是把清空sessionStorage的代码改成只删除当前页面存储的数据，而不是清空整个sessionStorage。可以使用sessionStorage.removeItem('key')方法来删除指定的键值对。
1 | // 清空当前页面存储的数据 |
这样就可以避免清空其他页面存储的数据，也不会影响到token的存储。
总结
慎用sessionStorage.clear()方法，它会清空整个sessionStorage，可能会导致其他页面存储的数据丢失。这个方法应用在关闭整个应用的时候做总的清理工作。
如果只是某个页面的清理工作，建议使用sessionStorage.removeItem('key')方法来删除指定的键值对，这样可以避免不必要的数据丢失。