2-7 城市的本地存储

将City组件的数据存入缓存,缓存中有就取缓存,没有则发送http请求

一、有缓存取缓存,没有缓存设置缓存

技术要点

localStorage.setItem()
localStorage.getItem()
JSON.parse()
JSON.stringify()

export default {
  name: "City",
  data() {
    return {
      hotCities: [],
      cities: "",
      isLoading: true
    };
  },
  mounted: async function() {
    var cities = localStorage.getItem("cities");
    var hotCities = localStorage.getItem("hotCities");
    if (hotCities && cities) {
      this.hotCities = JSON.parse(hotCities);
      this.cities = JSON.parse(cities);
      this.isLoading = false;
    } else {
      var url =
        "https://easy-mock.com/mock/5d313b5dcac88245d6b0b79a/movie/city";
      var res = await this.axios.get(url);
      var data = res.data.data;
      this.handleCity(data);
    }
  },
  methods: {
    handleCity(data) {
      var { hotCities, cities } = data;
      this.hotCities = hotCities;
      this.cities = cities;
      localStorage.setItem("hotCities", JSON.stringify(hotCities));
      localStorage.setItem("cities", JSON.stringify(cities));
      this.isLoading = false;
    }
  }
};
</script>