前后分离项目 —— 前端实现本地存储（数据可供其他页面使用）

---

一、前端本地存储请求到的数据供自己及其他页面使用

1. 两种存储方法的复习

下面是 localStorage 和 sessionStorage 使用的参考链接

localStorage & sessionStorage 参考链接

2. 业务场景

1. X 用户登录（login页面）成功后，在主页面（home页面）显示 X 用户的相关信息。

登录页面（Slogin）：

主页（home）：

3. 如何实现的？

1. 点击登录按钮后发送 axios 请求，得到的数据使用 localStorage.setItem() 方法存储到本地，注意使用 JSON.stringify() 转换格式。

	login() {
    
    
		axios({
    
    
        method: "post",
        url: "xxx"
      }).then((res) => {
    
    
      	....
        localStorage.setItem('student', JSON.stringify(res.data));
	}

登录请求成功，实现数据的本地存储：

2. 在 home.vue 的 methods 中定义 getData() 方法，用于本地存储数据的获取

	getData(){
    
    
      const result = localStorage.getItem('student')
      const res = JSON.parse(result)  //转回原来的形式
      this.name = res.name 
      this.campus = res.campus
      this.class = res.class
    },

注意在 created 钩子 中调用 getData 方法

    created() {
    
    
      this.getData()
    }

3. 在 data 中事先定义好那三个接收属性

	data() {
    
    
		return{
    
    
			name: '',
			campus: '',
			class: ''
		}
	}

4. 通过文本插值显示内容

	<p>姓名：{
    
    {
    
    name}}</p>
	<p>学院：{
    
    {
    
    campus}}</p>
	<p>班级：{
    
    {
    
    class}}</p>

效果就实现了：

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…