一、localStorage

1.设置localStorage

if(!window.localStorage){
 	console.log("浏览器不支持localstorage");
}else{
    //主逻辑业务
    localStorage.setItem(name, val);
}

2.获取localStorage

if(!window.localStorage){
 	console.log("浏览器不支持localstorage");
}else{
    //主逻辑业务
    localStorage.getItem(name);
}

3.清除localStorage

if(!window.localStorage){
 	console.log("浏览器不支持localstorage");
}else{
    //主逻辑业务
    localStorage.removeItem(name);
}

4.使用心得
localStorage储存空间很大，可以达到5M；存储时间长，不去手动清除localStorage值会一直在，可以自己根据存储时间手动设定保留时间。例如：

  setToken(key, value) {
      let curtime = new Date().getTime(); // 获取当前时间 ，转换成JSON字符串序列 
      let valueDate = JSON.stringify({
          val: value,
          timer: curtime
      });
      localStorage.setItem(key, valueDate); 
  }

  getToken(key) {
      const exp = 86400*1000  // 设置保留时间为24小时    
      if(localStorage.getItem(key)) {
          var vals = localStorage.getItem(key); // 获取本地存储的值 
          var dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
          // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间 
          var isTimed = (new Date().getTime() - dataObj.timer) > exp;
          if(isTimed) {
              localStorage.removeItem(key);
              return null;
          } else {
               var newValue = dataObj.val;
          }
          return newValue;
      } else {
          return null;
      }
  }

关闭浏览器后重新打开值也一直在，但是我公司的产品要求是关闭浏览器后重新打开浏览器，登录状态要解除。我再vue使用中localStorage储存登录状态遇到的问题是前端js无法监测到浏览器关闭，网上window.onbeforeunload方法都试过都无法监测到浏览器关闭，或者是刷新页面也会触发，所以放弃这个localStorage方法的使用。

二、sessionStorage

使用大体上和localStorage一样

1.设置sessionStorage

if(!window.sessionStorage){
 	console.log("浏览器不支持sessionStorage");
}else{
    //主逻辑业务
    sessionStorage.setItem(name, val);
}

2.获取sessionStorage

if(!window.sessionStorage){
 	console.log("浏览器不支持sessionStorage");
}else{
    //主逻辑业务
    sessionStorage.getItem(name);
}

3.清除sessionStorage

if(!window.sessionStorage){
 	console.log("浏览器不支持sessionStorage");
}else{
    //主逻辑业务
    sessionStorage.removeItem(name);
}

4.使用心得
sessionStorage使用大体上和localStorage一样，sessionStorage有他唯一的特性就是，关闭浏览器后自动清除sessionStorage的值，似乎满足了关闭浏览器退出登录的需求，但是又出现了另个一个问题，同一个浏览器的不同窗口不能共享sessionStorage存的值，也就是每个窗口各有其sessionStorage值，这就导致了同一个浏览器客户端可以同时登录多个账号，不符合产品需求，所以也放弃这个使用。

三、cookie

我vue的项目中使用的是 ‘js-cookie’

import Cookies from 'js-cookie'

1.设置cookie

Cookies.set(name, value);

2.获取cookie

Cookies.get(name)

3.清除cookie

Cookies.remove(name)

4.使用心得
cookie的expires可以配置cookie保留时间，不设置的保留时间的话关闭浏览器就会自动清除，刚好满足了我关闭浏览器退出登录的需求，我就选用了这种方式，如果要设置半个小时过期的话可以这样设置时间。例如：

setToken(key, value) {
   let curtime = new Date().getTime(); // 获取当前时间 ，转换成JSON字符串序列 
    let valueDate = JSON.stringify({
        val: value,
        timer: curtime
    });
    Cookies.set(key, valueDate);
 }

getToken(key) {
      const exp = 0.5*3600*1000   // 设置半小时
      if(Cookies.get(key) && Cookies.get(key) != undefined) {
          var vals = Cookies.get(key); // 获取本地存储的值 
          var dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
          // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间 
          var isTimed = (new Date().getTime() - dataObj.timer) > exp;
          if(isTimed) {
              Cookies.remove(key);
              return null;
          } else {
              var newValue = dataObj.val;
          }
          return newValue;
      } else {
          return null;
      }
  }

以上是一些做项目的心得体会，希望对大家有帮助。