前端本地数据存储localStorage

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