关于前端存储token存储位置的问题
一.我们首先要知道vuex,localStorage和sessionStorage区别; 参考文章:https://blog.csdn.net/qq_31741481/article/details/88054069 1.localStorage 优点: a,localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否...
一.我们首先要知道vuex,localStorage和sessionStorage区别;
参考文章:https://blog.csdn.net/qq_31741481/article/details/88054069
1.localStorage
优点:
a,localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
b,相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口)。
缺点:
a,同一个属性名的数据会被替换。
b,不同浏览器无法共享localStorage或sessionStorage中的信息。
2.sessionStorage
优点:
a,sessionStorage生命周期为当前窗口或标签页,
b,sessionStorage的数据不会被其他窗口清除
c,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
缺点:
a,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
3.vuex
优点:
a,vuex的数据存储在内存中,保密性较高
缺点:
a,当刷新页面(这里的刷新页面指的是 --> F5刷新,属于清除内存了)时vuex存储的值会丢失
总结:也就是说,localStorage可存储持久化的数据;sessionStorage仅限于当前窗口;vuex可存储保密性较高的数据,但刷新页面后数据会被清除.
二.接下来分析下token分别存储在vuex,localStorage和sessionStorage区别
1,localStorage:可以持久化保存token,需要在重新登录时,清除原有的localStorage数据;但如果打开新的页面(新窗口)重新登录其他账号,会替换原有的token;
2,vuex:保密性高,不会因为打开其他页面清除token,但页面刷新会清除token.
注:可以尝试在监听页面刷新前,将vuex存在localStorage,刷新后再获取并删除token
3,sessionStorage:在不关闭窗口的情况,可以持久化保存token,也需要在重新登录时,清除原有的sessionStorage数据;但打开新的页面(新窗口)重新登录其他账号,不会替换原有token;也不会因为刷新页面清除token;
注:如果复制页面的话,两个页面会共享sessionStoage中的数据
综合上述分析:token最好是保留在sessionStorage中
ps:以上仅为个人理解,如有异议,欢迎指出
更多推荐
所有评论(0)