前端 登录权限 本地缓存用户信息

   登录中很关键的一个操作就是在本地缓存用户信息,用来验证并记录下用户的登录状态。用来维护用户的信息安全,比如设置网页访问权限,也有些请求头需要在authentication带上相关信息,以验证用户身份。
   下面有几种本地缓存的方法,包括HTML5中的localStorage和sessionStorage    以及最常用的cookie,和vue中的vuex。
  1. localStorage
    localStorage属于HTML中的特性,数据以键/值对形式存在,localStorage可以存储的较大的数据,并且存储的数据没有时间限制,直到手动删除。另外localStorage在浏览器中都以字符串形式存储,而我们又经常会存储对象(JSON格式)的数据,所以需要转化。
    以下的方法只要写在html的<script>标签中就会生效哦,也就是任何框架中都适用。
localStorage.setItem(key,value) //设置localstorage
localStorage.getItem(key,value) //获取localStorage
localStorage.removeItem(key)    //获取localStorage
JSON.stringify(string)          //将对象的转化为字符串
JSON.parse(string)              //将字符串形式的json格式转化为对象
如果存取出现问题,可以进开发者工具的Application追踪一下是什么问题。   

查看浏览器缓存

  1. sessionStorage
    session是HTML5中web存储的另一特性,与localStorage不同的是它的生命周期,作为会话级存储,在关闭浏览器后,也就消失了。
sessionStorage.setItem(key,value) //设置Session
sessionStorage.getItem(key,value) //获取Session
sessionStorage.removeItem(key)    //获取Session
JSON.stringify(string)            //将对象的转化为字符串
JSON.parse(string)                //将字符串形式的json格式转化为对象
  1. Cookies
    cookie存储于用户本地的一段文本信息。其存储的形式也是键值对,存储为字符串信息,因此原生js存取cookie操作相比以上两种要复杂一些。不同的是cookie可以设置expires也就是过期时间。

原生cookies的使用可以参考w3school的cookie介绍
https://www.w3school.com.cn/js/js_cookies.asp

而在开发中为了使用方便,往往会引入cookies插件,比如js-cookie等。而像Jquery这种js开发框架也会自带cookie。

//js-cookie使用
Cookies.set('name','value',{expires:1, path:"") //设置Cookies
Cookies.get('key')      //获取cookies
Cookies.remove('key')   //移除cookies
Cookies.getJson('key')  //Json.parse并返回
  1. vuex
    vuex是在vue中使用的状态管理工具,当使用vue开发时,若用到了vuex则可以使用vuex-persistedstate来将state持久化,使state不在刷新后消失,达到本地存储的效果,而且可以存储为以上三种形式。使得整个状态更方便管理。
    只要在初始化vuex的时候加入组件即可。
    在这里插入图片描述
//基础使用

微信扫码订阅
UP更新不错过~
关注
  • 22
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论 1

打赏作者

ckhIS

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值