localStorage + Vuex 保存用户信息

在我们***项目中,使用了Vue前端框架,由于某些页面(比如最近的秋季抽奖主题以及玩家社区评论页面和点赞页面)需要用户登录才能进行签到、抽奖、评论和点赞等功能。一般像这样的用户信息一般都是存在Vuex里面,因为Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。但是Vuex虽然能存储状态,但是一旦页面刷新,用户状态也随之刷新消失,如果想要用户状态不会因为刷新而消失,这里便要用到本地存储了。因为localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,相当于前端页面的数据库。

在万岁爷官网中采用了localStorage + Vuex结合来保存用户信息,Vuex结构如下图1。

图1 Vuex结构图

在本项目中,我单独将localStorage放在一个js里面,在有需要的时候可以调用,如图2。

图2 localStorage.js

This.get是读取localStorage里面的数据,this.set是将数据存入localStorage,this.clear清除localStorage里的数据。

如果需要调用localStorage,则可以在需要调用的文件里面引入localStorage。如图3。

图3 user_login.js
图4 user_login.js里面的state和getters  
图5 user_login.js里面的mutations和actions  

存储基础信息,将传入的data赋值给state.user_datas,然后将state存入localStorage.user_info。

清除localStorage里面的数据,可以将state.user_datas设置为空值,然后将空值存入localStorage.user_info。这样localStorage里面的数据就为空。这个在登出网站的时候可以用到。

图6 登录

在登录网站的时候,在请求用户数据后,利用this.$store.commit将请求到的数据存入localStorage。存入localStorage里面的信息如果不手动删除是会一直存在的,可以在整个项目里直接调用。如图6。

图7 登出

在登出网站的时候,直接this.$store.commit(‘CLEAR_BASEINFO’)。即可删除localStorage里面用户的状态信息。如图7。

图8登录后的localStorage.uesr_datas  
图9效果图
图10登出后的localStorage.uesr_datas

好了,就这样~


推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 70,025评论 26 501
  • 百战程序员_ Java1573题 QQ群:561832648489034603 掌握80%年薪20万掌握50%年薪...
    Albert陈凯阅读 9,114评论 2 29
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    会飞的鱼69阅读 20,498评论 18 385
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,635评论 15 534
  • 中剪子巷里住着冰心,故都永远是每个人的极乐回忆。与故乡之别在八岁,从小学到中学,十年时光弹指过。在我记忆里犹然而新...
    觅封侯阅读 78评论 0 1