一、前端本地存储请求到的数据供自己及其他页面使用
1. 两种存储方法的复习
下面是 localStorage 和 sessionStorage 使用的参考链接
localStorage & sessionStorage 参考链接
2. 业务场景
X 用户登录（login页面）成功后，在主页面（home页面）显示 X 用户的相关信息。
登录页面（Slogin）：
主页（home）：
3. 如何实现的？
- 点击登录按钮后发送 axios 请求，得到的数据使用 localStorage.setItem() 方法存储到本地，注意使用 JSON.stringify() 转换格式。
login() { axios({ method: "post", url: "xxx" }).then((res) => { .... localStorage.setItem('student', JSON.stringify(res.data)); }
登录请求成功，实现数据的本地存储：
- 在 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() }
- 在 data 中事先定义好那三个接收属性
data() { return{ name: '', campus: '', class: '' } }
- 通过文本插值显示内容
<p>姓名：{{name}}</p> <p>学院：{{campus}}</p> <p>班级：{{class}}</p>
效果就实现了：
不积跬步无以至千里 不积小流无以成江海
