localStorage的数据为什么要用vuex维护——localStorage的读取性能

因为localStorage的读取性能差

  其实之前我就很好奇，localStorage跟vuex一样是全局的，要用到localStorage里的变量的时候直接调用localStorage的API取出来，要保存到localStorage的时候也是调用API直接保存不就好了，为什么这么麻烦，还一定要保存到Vuex里。

特别是像我这种vuex初学者，刚开始用vuex维护localStorage的数据都是业务组件保存一次到localStorage，然后vuex里面相应的数据也更新一下，这就是两次操作，而直接操作localStorage只有一行。虽然现在学会了保存localStorage的数据直接调用mutation的方法更新state里面的数据，顺便调用localStorage的API把localStorage的数据也更新了，代码也从两行变成了一行。

之前认为localStorage的数据要用vuex维护有以下两个原因：

  1. vuex是状态管理，全局的变量都应该放置到这里，方便查找维护，比较规范。
  2. localStorage的API用起来不太友好，基本都需要用到JSON.parse和JSON.stringify对其进行转化。
  后面才发现，原来localStorage的数据要用vuex维护主要原因是localStorage的读取性能极差，远远低于vuex的读取性能。因为所有的localStorage数据都存储在磁盘文件上，所以localStorage的读取相当于一次磁盘读取、文件读取。而vuex的读取时内存读取，自然localStorage的读取会慢于vuex的读取。

关于localStorage的读取性能可以查看这篇文章
这里特意提一下，该篇文章也指出，虽然正常来说磁盘读取和文件读取是异步的，但是localStorage的开发人员将其做成同步的，所以平时使用起来不会因为异步而产生错误。

  虽然localStorage的读取远远慢于vuex的读取，但是我们又不得不用localStorage，所以我们只能减少localStorage的读取次数，即刷新或初次打开页面的时候读取一次localStorage的数据到vuex，之后要用直接去vuex里面拿就可以了。