vue项目笔记（20）-localStorage的使用

谁借莪１个温暖的怀抱￠ 2021-09-16 03:10 484阅读 0赞

# vue中localStorage的使用 #

在原有的项目中，需要缓存效果。h5中新增了localstorage，可以用于缓存。代码修改如下：

store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    let defaultCity = '北京';
    try {
      if (localStorage.city) {
        defaultCity = localStorage.city;
      }
    } catch (e) {
    }
    export default new Vuex.Store({
      state: {
        city: defaultCity
      },
      mutations: {
        changeCity(state, city){
          state.city = city;
          try {
            if (localStorage.city) {
              defaultCity = localStorage.city;
            }
          } catch (e) {
          }
        }
      }
    })

注意：在使用localstorage的时候，建议大家使用try/catch。因为在某些浏览器中，如果用户关闭了本地存储或者使用隐身模式，使用localstorage，浏览器会抛出异常。

但是，此时index.js文件变得复杂了，我们可以进行拆分，便于管理与维护。

拆分步骤：

（1）在store下新建state.js文件，将store/index.js中对应的内容剪切到state.js文件中。

let defaultCity = '北京';
    try {
      if (localStorage.city) {
        defaultCity = localStorage.city;
      }
    } catch (e) {
    }
    export default {
      city: defaultCity
    }

（2）分析上面代码，该文件已经导出。我们在index.js中引用即可。

import state from './state.js'
    
    export default new Vuex.Store({
      state, // 引入
      mutations: {
        changeCity(state, city){
          state.city = city;
          try {
            if (localStorage.city) {
              defaultCity = localStorage.city;
            }
          } catch (e) {
          }
        }
      }
    })

同理，我们拆分mutations，然后引入到index.js中。

mutations.js文件

/**
     * Created by yangbaoshuai on 2018/8/16.
     */
    export default {
      changeCity(state, city){
        state.city = city;
        try {
          localStorage.city = city;
        } catch (e) {
        }
      }
    }

当选取的城市文字较多的时候，出现拥挤换行的情况。究其原因，是我们把对应的文字所在的标签宽度固定了，我们做如下修改：将width修改为min-width，并设置padding。

![70][]

.header-right
          min-width 1.04rem
          pading 0 0.1rem

[70]: /images/20210802/06e8790234344e03b839f35bb06b3a8b.png