一次请求，就是一次对服务器的访问，如果是不经常变化的数据，首次请求成功后，可以通过页面的localStorage对象，将数据缓存到浏览器中，下次再请求时，再取出缓存的数据，用于页面内容的显示，这种缓存数据的方式既减轻了服务器的访问压力，又加快了请求响应的速度，极大地优化了用户请求数据的体验。
localStorage是HTML 5标准中新增的一个用于数据缓存的对象，它的最大缓存体积为5M的字符内容，它是一个永久性的浏览器缓存对象，除非人为删除，否则，一直存在于浏览器中，即使是关闭浏览器后，再次打开，缓存对象依然存在于浏览器中。
localStorage有三个常用的操作方法，分别用于设置、读取和删除指定名称的缓存内容，具体实现的方法如下列代码所示：
// 1. 设置一个key值为cacheData的localStorage对象
localStorage.setItem("cacheData", "tgrong");
// 2. 获取key值为cacheData的localStorage对象
localStorage.getItem("cacheData");
// 3. 删除key值为cacheData的localStorage对象
localStorage.removeItem("cacheData"))需要说明的是，在调用setItem方法设置一个localStorage对象时，参数key值必须确保在同一个域名下的唯一性，否则会被同名的内容所替代;参数value值必须是一个字符类型，如果是其他类型，如object类型时，必须先转换成字符型，否则无法缓存期望的数据。
接下来，演示如何将实例【9-1】请求获取的数据进行缓存过程。
实例9-2 缓存数据
1. 功能描述
在实例【9-1】的基础之上，新添加一个内容为“缓存数据”的按钮，点击该按钮时，先向服务器发送异步请求，获取响应数据后，缓存在本地，当再次点击该按钮时，如果发现有指定名称的缓存数据，则直接调用缓存，否则，再次发送请求获取数据。
2. 实现代码
为了实现数据请求成功后，缓存数据的功能，先打开路径为components/ch9/ 中的BaseRequest文件，修改后代码如代码清单9-6所示的。
代码清单9-6 BaseRequest.vue代码
<template><div class="iframe"><div class="i-left"><span>返回值：</span><span>{{ data }}</span></div></div><div class="iframe"><div class="i-left"><button @click="onSendRequest">发送请求</button><button @click="onCacheRequest">缓存数据</button></div></div>
</template>
<script>
export default {data() {return {data: ""}},methods: {...其他方法见实例【9-1】onCacheRequest() {this.data = "loading...";// 先判断是否有缓存数据if (localStorage.getItem("cacheBase")) {this.data = localStorage.getItem("cacheBase");} else {this.$http.get('/?day=1-1').then(d => {this.data = d.data// 请求成功后，再缓存返回数据localStorage.setItem("cacheBase", d.data)}, err => {console.log(err.message)})}}}
}
</script>
<style>
/* 样式见示例【9-1】*/
</style>3. 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图9-7所示。
4. 源码分析
在本示例中，当点击“缓存数据”按钮时，先判断key值为“cacheBase”的缓存数据是否存在，如果存在，则直接调用它，并赋值给变量data，显示在视图中;如果不存在，才发送异步请求，在获取请求成功响应数据时，将返回的数据缓存到key值为“cacheBase”的localStorage对象中，用于后续的判断和显示。
