数据存本地js方法文件
const local =  {}
/**
 * put 把数据放到本地存储
 * @param {*} key
 * @param {*} value
 */
local.set = function (key, value) {
  window.localStorage.setItem(key, JSON.stringify(value));
};
/**
 * get 获取本地存储数据
 * @param {*} key
 */
local.get = function (key) {
  var obj = window.localStorage.getItem(key);
  if (obj && obj != 'undefined' && obj != 'null') {
    return JSON.parse(obj);
  }
  return '';
};
/**
 * remove 清除本地数据
 * @param {*} key
 */
local.remove = function (key) {
  if (key) {
    window.localStorage.removeItem(key);
  } else {
    for (var i in arguments) {
      window.localStorage.removeItem(arguments[i]);
    }
  }
};
/**
 * seek 检查本地是否有值
 * @param {*} key
 */
 local.seek = function (name) {
   if (!name) return;
   return window.localStorage.hasOwnProperty(name)
 }

export default local

我以Vue项目为参考做事例，若其他文件需要引用，则在其它页面按需引入即可。
import local from "../../libs/local";  //依据自己页面实际路径为准

接下来展示如何使用
//数据存储本地
local.set("areaDatas", data); //其中"areaDatas"为key，data为value
//数据从本地取出
local.get("areaDatas");
//数据从本地清除
local.remove('areaDatas');

接下来为大家展示一个我所遇到的坑，当你想存一个ES6中的map去本地的话，计算机并不会如你所愿，你按照刚刚的做法得到的value将会是undefined
click_areaCodeList() {
      let param = {
        getAll: 1
      };
      areaCodeList(param)
        .then(resp => {
          if (resp.data) {
            let data = resp.data.data;
            let map = new Map();
            for (let i = 0; i < data.length; i++) {
              let key = map.get(data[i].code);
              if (key == undefined) {
                let arr = [];
                arr.push(data[i].province, data[i].city, data[i].district);
                map.set(data[i].code, arr);
              } else {
                key.push(data[i].code);
                map.set(data[i].code, key);
              }
            }
            local.set(
              "xzqbmChangeList",
              JSON.stringify(Array.from(map.entries()))  //你得这样才能存进去
            );
          }
        })
        .catch(error => {
          console.log(error);
        });
    }

接下来就是取了，也有一点变化
this.xzqbmChangeList = new Map(JSON.parse(local.get("xzqbmChangeList")));

既然说到了Map，就为大家简单过一下map的添加键和读取值吧
ES6之Map小解
var myMap = new Map();
 
var keyObj = {},
    keyFunc = function () {},
    keyString = "hzq";
 
// 添加键
myMap.set(keyString, "和键'hzq'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");
 
myMap.size; 
 
// 读取值
myMap.get(keyString);    // "和键'hzq'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"
 
myMap.get("hzq");        // "和键'hzq'关联的值"
                         // 因为keyString === 'hzq'
myMap.get({});           // undefined, 因为keyObj !== {}
myMap.get(function() {}) // undefined, 因为keyFunc !== function () {}

最后说个小知识，如果你在不同页面向本地存储数据时，想存在一个对象里，你可以如下操作，
//先从本地获取原有数据，如：
_this.adressDatas = local.get('adressDataInfo');
//然后在需要的地方定义一个新对象，如：var obj = {}  
var obj = {..._this.adressDatas,...{
    bussAdress:_this.bussAdressAll.bussAdress,//企业地址
    bussAdressId:_this.bussAdressAll.bussAdressId,//企业地址id
    detailed:_this.bussAdressAll.detailed,//详细地址
   	userName:_this.bussAdressAll.userName,  //联系人姓名
    contactPhone:_this.bussAdressAll.contactPhone, //联系电话
    userEmail:_this.bussAdressAll.userEmail  //联系人邮箱
    }}
    // 写好后在把它存入本地，
    local.set('adressDataInfo',obj)
    //这样的话，本地中的数据都保存在这个adressDataInfo键值value下。

本文章为原创，若转载请注明出处，喜欢的朋友请给个关注，谢谢

1、dom结构说明:

【评论人、评论内容、发表评论】是子组件内容；评论列表是父组件内容；

2、功能点：点击【发表评论】，最新评论的内容显示在评论列表的最上面，如何实现？

分析：

// 1. 发表评论的数据存到localStorage 中，关于localStorage ，说明几点：

a. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的;
	
b. localStorage只支持string类型的存储
	
c. localStorage.setItem(key,value)：将value存储到key字段,如果value是JSON对象，需要使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
	
d. localStorage.getItem(key):获取指定key本地存储的值
	
e. 如果需要将JSON字符串转为JSON，则使用JSON.parse()方法实现
// 2. 先组织出一个最新的评论数据对象

// 3. 在保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数据（string），转换为一个数组对象；如果获取到的localStorage 中的评论字符串，为空不存在， 则可以返回一个 '[]' 让 JSON.parse 去转换；然后，把最新的评论，unshift到这个数组

// 4. 把最新的评论列表数组，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem()存储起来

//5. 评论之后，把评论人、评论内容置空

//6. 调用父组件传递的方法，向父组件传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  <style>
  .box{
    padding: 20px;
  }
  </style>
</head>

<body>
  <div id="app" class="box">
    <cmt-box @func="loadComments"></cmt-box>
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>
  </div>
  <!-- 和父组件平级放置，独立于app -->
  <template id="tmpl">
    <div>
      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>
      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>
    </div>
  </template>
  <script>
    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          var comment = { id: Date.now(), user: this.user, content: this.content }
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          localStorage.setItem('cmts', JSON.stringify(list))
          this.user = this.content = ''
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: []
      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>

 

 

 

 

app.vue

<template>
  <div id="app">

    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang="less">

</style>


index.vue

<template>
  <div class="login-container">
    <!--必须用el-form进行包裹-->
    <div class="login-head"></div>
    <!--配置表单验证
    //必须为表单提供验证对象
    2添加prop属性
    3通过el-form组件库里面的rules-->

    <el-form class="login-form" ref="login-form" :model="user" :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox>

      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {
  },
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '', // 验证码
        agree: false// 是否同意协议
      },

      loginLoading: false, // 登录的loding状态
      /*  checked: false, // 是否同意协议 */
      formRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'change'
        },
        { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        code: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'change'
        },
        { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }

        ],
        agree: [{
          // 调用
          validator: (rule, value, callback) => {
            if (value) {
              callback()
            } else {
              callback(new Error('请同意用户协议'))
            }
          },

          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    onLogin () {
      // 获取表单数据
      // const user = this.user
      // 触发表单验证 validate是异步
      this.$refs['login-form'].validate((valid, err) => {
        console.log(valid)
        console.log(err)
        // 如果
        if (!valid) {
          return
        }
        this.login()
      })
    },
    login () {
      // 开启loading
      this.loginLoading = true
      // 验证通过
      // 请求直接封装
      login(this.user).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'

        })
        this.loginLoading = false
      }).catch(err => {
        console.log('登录失败', err)
        this.$message.error({
          message: '手机号或者验证码错误',
          type: 'warning'

        })
        this.loginLoading = false
      })
    }
  }

}
</script>
<style scoped lang="less">
.login-container{
position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-head{
    width: 300px;
    height: 57px;
    background:url("./logo_index.png") no-repeat;
    margin-bottom: 30px;
  }
  .login-form{
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .login-btn{
      width: 100%;
    }
  }
}
</style>


main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './styles/index.less'
// 加载组件库
import ElementUI from 'element-ui'
// 加载样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 注册组件库
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')


index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index'
Vue.use(VueRouter)

// 路由配置表
const routes = [{
  path: '/login',
  name: 'login',
  component: Login
}]
const router = new VueRouter({
  routes
})

export default router


user.js

// 用户登录的请求模块
import request from '@/utils/request'

export const login = data => {
  return request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    data
  })
}

// 获取用户信息
export const getUserProfile = () => {
  const user = JSON.parse(window.localStorage.getItem('user'))
  console.log(user)
  return request({
    method: 'GET',
    url: '/mp/v1_0/user/profile',
    // axios通过headers
    headers: {
      Authorization: `Bearer ${user.token}`
    }
  })
}


index.vue

<template>
  <div class="home-container">首页</div>
</template>
<script>
export default {
  name: 'HomeIndex',
  data () {
    return {

    }
  }
}
</script>
<style scoped lang="less">

</style>


index.vue

<template>
  <div class="login-container">
    <!--必须用el-form进行包裹-->
    <div class="login-head"></div>
    <!--配置表单验证
    //必须为表单提供验证对象
    2添加prop属性
    3通过el-form组件库里面的rules-->

    <el-form class="login-form" ref="login-form" :model="user" :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>

      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {
  },
  props: {},
  data () {
    return {
      user: {
        mobile: '13911111111', // 手机号
        code: '246810', // 验证码
        agree: false// 是否同意协议
      },

      loginLoading: false, // 登录的loding状态
      /*  checked: false, // 是否同意协议 */
      formRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'change'
        },
        { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        code: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'change'
        },
        { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }

        ],
        agree: [{
          // 调用
          validator: (rule, value, callback) => {
            console.log(value)
            if (value) {
              callback()
            } else {
              callback(new Error('请同意用户协议'))
            }
          },

          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    onLogin () {
      // 获取表单数据
      // const user = this.user
      // 触发表单验证 validate是异步
      this.$refs['login-form'].validate((valid, err) => {
        console.log(valid)
        console.log(err)
        // 如果
        if (!valid) {
          return
        }
        this.login()
      })
    },
    login () {
      // 开启loading
      this.loginLoading = true
      // 验证通过
      // 请求直接封装
      login(this.user).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'

        })
        this.loginLoading = false
        // 跳转到首页
        window.localStorage.setItem('user', JSON.stringify(res.data.data))

        // 将接口返回的数据接收

        this.$router.push({
          name: 'home'
        })
      }).catch(err => {
        console.log('登录失败', err)
        this.$message.error({
          message: '手机号或者验证码错误',
          type: 'warning'

        })
        this.loginLoading = false
      })
    }
  }

}
</script>
<style scoped lang="less">
.login-container{
position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-head{
    width: 300px;
    height: 57px;
    background:url("./logo_index.png") no-repeat;
    margin-bottom: 30px;
  }
  .login-form{
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .login-btn{
      width: 100%;
    }
  }
}
</style>


aside.vue

 

<template>
  <!--
    el-menu-item 的 index 不能重复，确保唯一即可
   -->
  <el-menu
    class="nav-menu el-menu-vertical-demo"
    :default-active="$route.path"
    background-color="#002033"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    :collapse="isCollapse"
  >
    <el-menu-item index="/">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/article">
      <i class="el-icon-document"></i>
      <span slot="title">内容管理</span>
    </el-menu-item>
    <el-menu-item index="/image">
      <i class="iconfont iconimage"></i>
      <span slot="title">素材管理</span>
    </el-menu-item>
    <el-menu-item index="/publish">
      <i class="iconfont iconpublish"></i>
      <span slot="title">发布文章</span>
    </el-menu-item>
    <el-menu-item index="/comment">
      <i class="iconfont iconcomment"></i>
      <span slot="title">评论管理</span>
    </el-menu-item>
    <el-menu-item index="/fans">
      <i class="el-icon-setting"></i>
      <span slot="title">粉丝管理</span>
    </el-menu-item>
    <el-menu-item index="/settings">
      <i class="el-icon-setting"></i>
      <span slot="title">个人设置</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: 'AppAside',
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style scoped lang="less">
.nav-menu {
  .iconfont {
    margin-right: 10px;
    padding-left: 5px;
  }
}
</style>


 运行结果

 

原因：
系统登录成功之后，将信息保存在了vuex中的store中，当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，触发created中方法条件未能满足，因此数据就丢失了
解决方法：
登录成功后，信息存到vuex中的同时将数据用sessionStorage存储到本地，刷新页面之后将存储在本地的值重新赋值给vuex中
	//将key存放入vuex
	_this.$store.state.key = _this.ruleForm.key;
	//将key存放入sessionStorage
     sessionStorage.setItem('key',_this.ruleForm.key);

  created(){
		//刷新获取到存储的值放到vuex中
  	if(this.$store.state.key=="" && sessionStorage.getItem("key")){
      this.$store.state.key = sessionStorage.getItem("key")
    }else{
    	//刷新 如果本地存储没有值 跳转到首页
       this.$router.push("/login");
    }
  }