uni-app 本地数据缓存建立用户注册登录退出状态实例
本文章是通过缓存建立一个注册一个用户保存在本地缓存key中，在通过本地key对比用户和密码正确着跳转登入界面。登入界面有一个if判断，如本地用户没有登入着显示默认头像，用户登入着获取用户ID和头像等，退出用户清空本地缓存。这是简单的概述下思路。初步介绍uni.setStorage用法，后期在更新通过API让用户登入。
1.获取模板
a.uni-app插件市场有很多模板，我们直接下载不去自己写（偷懒Ing！）
Simple-login包含登录注册页面模版下载地址:https://ext.dcloud.net.cn/plugin?id=96
我们先看下目录结构和效果图
2.注册表单
下载好后导入到Hbuilder x中，register.vue界面中我们去建立一个表单 ，在按钮位置添加form-type=”submit”
<view class=" registerbtn has-radius has-mgtb-20"> <button form-type="submit">注 册</button> </view>切在最外层添加一个submit触发一个名为tijiao的事件
<form @删除我submit="tijiao"> <view class="has-mglr-10 "> <view class=" has-mgtb-10 "> <input name="username" type="text" maxlength="11" placeholder="请输入手机号" class="is-input1 " /> </view> <view class=" has-radius has-mgtb-10"> <input name="password" placeholder="请输入登录密码" :password="true" class="is-input1" /> </view> <view class=" registerbtn has-radius has-mgtb-20"> <button form-type="submit">注 册</button> </view> </view> </form>在methods方法中添加tijiao事件函数和本地缓存 uni.setStorageSync（‘key名字’，‘key内容’），在次位置下断点
methods: { tijiao (e) { uni.setStorageSync("userpass",userdata); debugger; } }运行到微信小程序或者模拟器（H5不能用切记）随意输入字母点击注册，在断点中查看是否有数据
有数据那我们就意味着成功拉！如果大家要在控制台打印出来
var userdata = e.detail.value; console.log(e.detail.value);其实打不打印都差不多哈！当我们点击后需要一个提示告诉用户注册成功，直接在tiajiao方法中添加一个弹窗就好，枫瑞为了方便在弹窗点击确定后跳转到登录界面
uni.showModal({ title: '友情提示', content: '注册成功！是请往登入界面', success: function (res) { //点击确定后跳转界面 if (res.confirm) { uni.switchTab({ url: 'login' }) } } });3.登陆界面
登录界面会比注册难一点点，因为要获取用户输入的内容，然后和我们本地key对比，获取input框输入内容使用v-model，好像插件就写好了
<input v-model="login.password" placeholder="请输入登录密码" class="is-input1" @input="BindInput" data-val="password"/>key是一个对象，我们首先在return中声明一下
return { login: { loading: false, phone:"", password:"", bendi:{} }, };随后我们得在这个界面获取到我们得本地uni-app数据缓存，写onLoad里面，为了验证我们先打印看下有没有数据
onLoad() { this.login.bendi = uni.getStorageSync("userpass"); console.log(this.login.bendi) },在插件中的登陆有一个tap事件 我们就直接用这个了
<button :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}} </button>methods中添加函数，第一步我们的先确定key是不是存在的（上面onLoad其实可以看出有的，但是安全嘛在验证一次）
this.login.loading = true;第二步 对比key的用户名密码这里用if去对比，对比成功跳转个人中心。整体代码如下
defaultHandlerLogin:function(){ this.login.loading = true; if (this.login.bendi.username === this.login.phone) { if (this.login.bendi.password == this.login.password) { console.log("登陆成功") uni.showModal({ title: '友情提示', content: '登陆成功', success: function (res) { uni.switchTab({ url: 'index' }) } }); }else { console.log("密码错误") uni.showModal({ title: '友情提示', content: '密码错误', success: function (res) { } }); } }else { console.log("密码或账号错误") uni.showModal({ title: '友情提示', content: '密码或账号错误', success: function (res) { } }); } setTimeout((e=>{ this.login.loading = false; }),1500); console.log(JSON.stringify(this.login)); },其实if可以缩写，但是为了装逼就不简化了哈哈！如果大家要看本地得key在控制台中storage中就可以看到了
4.个人中心
个人中心我写在index页面下，那么首先我们得在pages.json中声明下界面
{ "path" : "pages/ucenter/index", "style" : { "navigationBarTitleText" : "个人中心", "app-plus":{ "bounce":"none" } } },和底部导航
{ "pagePath": "pages/ucenter/index", "iconPath": "static/img/footer/footer-home.png", "selectedIconPath": "static/img/footer/footer-home-act.png", "text": "登入" },首页在插件中是空白页面，老规矩先获取本地key
var info = uni.getStorageSync("userpass"); console.log(info)成功获取后，我们去写未登录样式，在给他一个判断如果是未登录就显示某个样式，以登录则显示用户头像 用if来判断（登录显示具体看源码）if得值则由return中布尔值来分别显示
return { panduan:true, info:{} };key值是否为空来赋值true或flase
if(info != null && info != "" && info != undefined){ this_s.panduan = false; this_s.info=info; // console.log(info.username) console.log("有数据") }else{ // this_s.panduan = false; // this_s.info = {}; console.log("没数据") }5.退出
退出就是清除本地key
uni.removeStorageSync('userpass');6.总结
uni-app 本地数据缓存建立用户注册登录状态退出实例大体思路，没有使用API导致我们在退出得时候界面不会自动刷新，所有会停留在有用户的状态下
