sessionStorage.setItem('key',value); // 存入
sessionStorage.getItem('key'); // 获取
场景:需要再请求接口时把获取的token值设置在请求头里
- 在首页设置了 sessionStorage.setItem('key',value)
- 在拦截器获取 sessionStorage.getItem('key')
bug出现的原因为: 今天在做响应式页面的时候碰到的一个问题,就是在移动端sessionStorage失效了 在移动端使用sessionStorage 时,由于sessionStorage 是基于会话的,而在移动端的某些浏览器上,切换页面时是系统打开了一个新的webview ,关闭旧的webView ,相当于打开了新窗口,所以sessionStorage 的数据会丢失,这和sessionStorage的原理相违背(关闭浏览器后清空)
localStorage.setItem('key',value); // 存入
localStorage.getItem('key'); // 获取
localStorage.clear(); //清除
当用户大多为移动端的用户时,有如下解决方案,sessionStorage被清空的原因是移动端关闭了浏览器,因此,我们在做移动端的时候,可以采用localStorage保存数据,使用完后再清空localStorage,当然,如果是在同一个页面中,sessionStorage的使用是没有任何问题的。
可以一起看一下sessionStorage和localStorage的概念,深入了解一下:
1、生命周期:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效**。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。
只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
2、存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB。
3、存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。
4、存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
5、获取方式:localStorage:localStorage.getItem("key");;sessionStorage:sessionStorage.getItem("key")。
6、应用场景:localStorage:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;