知识业务前提：
继续用上次toast的两端兼容性的问题出发，这次我们来说下实现两端的localStorage的兼容性，这次我们不厌其烦的说下我们业务的前提，从纯h5端vue项目迁移到uniapp，我们原来的项目中使用了大量的window.localStorage,但是为了避免大量的修改导致逻辑错乱，我们想在浏览器端的时候可以使用window自带的localStorage,但是在uniapp中使用uniapp的uni.localStorage。先在这里说下我们的大体的思路，接下来给大家逐行解析。
-
- 大家都知道在浏览器中调用localStorage的时候，其实是默认的调用window，这方案在浏览器端是可行的，但是在uniapp打包成为app的时候并没有window。
-
- 所以我们就在想，能不能在浏览器开发的时候使用的window.localStorage(注：因为我们开发的时候一般都是h5调试，h5调试的差不多了，再到app上调试)。但是再uniapp打包成为app的时候调用的是uniapp的。
-
- 这时候可能我们就可以在webpack中做手脚了，我们可以全局注入一个变量localStorage，让它返回一个对象，对象有两个属性分别是getItem,setItem,在这两个方法中分别调用uniapp的方法. 具体实现如下：
1. 如何知道哪端是h5 哪端是uniapp
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --PC",
大家可以看到上面的截图以及截图下面的运行语句，我们在命令后面写了一个--PC 用来表示是否运行在浏览器端的，可能有一部分人看到这个时候不太清除这个是干啥的，在这咱们先记住，后面会给大家详细的讲解，可能还有一部分人说我用的是hbuilder 怎么办呢。这个时候我就很遗憾的告诉大家，这就没办法了，因为我们的项目是通过vue-cli进行创建的，打包方式以及运行模式其实跟hbuilder 还是不一样的。
2. 如果实现全局注入：
其实我们全局注入的功能实现主要还是webpack.DefinePlugin来实现的，如果大家对webpack一无所知的话，这个时候大家就需要恶补下webpack知识了。首先大家可以记住插件DefinePlugin可以实现变量的全局注入，大家可能看到变量【last】了。这个时候大家可以回顾下我们我们之前的−−PC的标志，其实就是获取命令中的最后一项的。当如果命令运行的时候最后一项就是−−PC的话，我们可以理解为此时运行的环境就是浏览器环境，反之不是。当时浏览器环境的时候，是不会执行代码【if(last !== "--PC")】的，这个相当于我们没有注入，因为不会执行代码，反之就会执行代码。执行代码的时候就会把localStorage注入到全局。在非浏览器环境下的话 直接的就是这个代码 这个时候我们返回的就是自定义的setItem,getItem. 我们可以在其中封装自己的内容。比如调用uniapp.localStorage.
3. 疑问解答
-
- 有的同学肯定会有疑问。我们是怎么获取最后一项的呢。这个时候可能就需要用node知识了，node中全局变量的process.argv就可以获取命令参数。这个时候如果大家对process不太了解，可能就需要大家复习下node了。这里对node不做深入的讲解了
-
- 还有同学可能有疑问说，为什么是runtimeValue呢 因为我们试运行时取值。如果大家真的不了解。可以暂时记住就好。不必在意 用多了自然就会了
