浅谈localStorage

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage共享情况

1、不同浏览器无法共享localStorage和sessionStorage的值。

2、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值，通过跳转的页面可以共享sessionStorage值。

3、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式：

    (1) <a href="同源页面" target="_self">跳转</a>    //原窗口
    (2) <a href="同源页面" target="_blank">跳转</a>  //新开窗口
    (3) window.location.href = '同源页面'      //原窗口
    (4) window.location.replace('同源页面')   //原窗口
    (5) window.open('同源页面')       //新开窗口
    (6) this.$router.push({path: '同源页面'})   //通过路由跳转共享值

存在问题：

同源的前台和后台项目，一个网页退出登录，另一个网页也退出登录

原因：

两个项目退出登录后都使用localStorage.clear()来清空本地存储，由于同源情况下localStorage相互影响，导致其中一个退出，另一个也同时清空了存储。由于token存储在localStorage里面，另一个也没有了token，于是退出登录。

解决方法：

不要使用localStorage.clear()来清空本地存储，只使用localStorage.removeItem()来清除本项目相应的存储。