1)localStorage简介
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage
sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
2) 保存数据到本地
const info = {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));
3)从本地存储获取数据
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));
4)本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
5)对setItem 以及getItem方法进行封装
//localStroage
const store= {
save(key,value){ //数据保存的方法
localStroage.setItem(key,JSON.stringify(value));
},
fetch(key){ //数据获取的方法
return JSON.parse(localStroage.getItem(key))
}
}
//方法调用
store.save('localStroage',{
title:'初识localStorage'
})
console.log(store.fetch('localStroage'))
6）在浏览器中数据的查看
image.png
7）localStroage实战
localStroage最常用的地方是在登录的时候 记录用户登录状态
或者说登录之后的后端接口都需要带上用户令牌才能访问接口(token)
场景1、 调用登录接口，当后端放回登录成功后，此时需要把用户令牌token存储
场景2、当用户操作时检测当前的时间，如果当前的时间超过拟定的时间 就把登录信息清空，并返回登录页面
//@ outTimer是超过的时间(半小时)
let config = {
loginTitle : '标记取名',
timer : '实战时间取名',
outTimer : 1000*60*30
}
let getSession = {
setLogin(data){
//设置localStroage
var token = data.token ? data.token : null;
var name = data.name ? data.name : null;
localStorage.setItem(config.loginTitle,JSON.stringify({
token : token, //保存token
name : name //保存 用户名
}))
},
getLogin(){
let use = localStorage.getItem(config.loginTitle )
return use ? JSON.parse(use) : null
},
setTimer(){
let time = +new Date()
//+new Date()转换时间戳 或者getTime()
localStorage.setItem(config.timer,time)
},
getTimer(){
return localStorage.getItem(config.timer)
},
isLogin(){
//判断是否登录
let use = getLogin();
if(!use)
return false
let nowTime = +new Date()
let timerStramp = getTimer()
if( nowTime + config.outTimer <= timerStramp)
return true
return false
},
clear(){
//清除localStorage
localStorage.removeItem(config.loginTitle);
localStorage.removeItem(config.timer);
}
}
export default getSession
