结合上一章token的,这次来说一下localStorage的使用。
LocalStorage是HTML5加入的新特性,他可以在前端存储一些数据,且不会过期,在一定程度上可以把它理解为一个前端数据库,在这里存储token是在合适不过了。
LocalStorage的操作非常简单,他的写入有三种方法:
window.localStorage.a = 'study';
window.localStorage['b'] = 'eat';
window.localStorage.setItem('c', 'play');
他们的效果是一样的,他们的值可以在浏览器的控制台查看
读取也有三种方法,与写入基本一致:
let a = window.localStorage.a = 'study';
let b = window.localStorage['b'] = 'eat';
let c = window.localStorage.getItem('c', 'play');
删除有两种方式,分为全部删除和删除某个字段
window.localStorage.clear();
// 清除所有localStorage
window.localStorage.removeItem('a');
// 清除单条数据
基本操作就这些,每次启动页面时吧之前存的token发往服务器进行校验,通过后返回用户信息,如此便可以实现用户自动登录的功能。
最后,这里有一个小坑,所有存在localStorage的值都会被转化为字符串,所以,若要在localStorage里存对象的话,在取出来的时候需要对它进行转化。