sessionStorage.setItem("key", "value");    
localStorage.setItem("aaa", "111");
localStorage.name = "xuanyuan"

var value = sessionStorage.getItem("key");    
var site = localStorage.getItem("asd");

sessionStorage.removeItem("key");    
localStorage.removeItem("asd");

sessionStorage.clear();    
localStorage.clear();

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
    var key = storage.key(i);    
    var value = storage.getItem(key);    
    console.log(key + "=" + value);
}

<template>
  <div class="bigdiv">
    <div class="twodiv">
      <div >
        <p><h2>登錄</h2></p>
      </div>
      <div>
        <Input v-model="username" placeholder="賬號(hào)" style="width: 300px"></Input>
        <Input v-model="password" placeholder="密碼" style="width: 300px" type="password"></Input>
      </div> 
      <div>
        <Button type="info" @click="executelogin()" class="but">登錄</Button>
      </div>
    </div>
  </div>
</template>
<script>
// 引入axios組件
import axios from "axios";
import qs from "qs"; //處理數(shù)據(jù)  qs.stringify(params)
import {checkRule} from '@/assets/js/public';//引入公共js文件
export default {
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods: {
    /**
     * 提交用戶(hù)輸入的登錄信息
     */
executelogin() {
// 判斷瀏覽器是否支持localstroage
if(!window.localStorage){
this.$Message.error(‘您的瀏覽器不支持localstorage');
          return false;
       }
      const self = this;//將this對(duì)象附到一個(gè)不可更改的變量中~
      axios({
          method: "post",
          url: "你的url",
          data: {username: this.username,password:this.password}
      })
      .then(function(response) {
          checkRule(response,self);//檢查是否有權(quán)限
          if(response.data.status == 1){
         // 所有的瀏覽器中都會(huì)把localStorage的值類(lèi)型限定為string類(lèi)型，這個(gè)在對(duì)我們?nèi)粘１容^常見(jiàn)的JSON對(duì)象類(lèi)型需要一些轉(zhuǎn)換
            // 先存localStorage，再提示操作成功，然后跳路由
            // JSON.stringify:將對(duì)象轉(zhuǎn)成字符串
            // JSON.parse():將字符串裝換成對(duì)象
            let toll = JSON.stringify(response.data.toll);//將當(dāng)前信息變成json字符串
            localStorage.toll = toll;//存儲(chǔ)用戶(hù)信息
            let nowtime = new Date().getTime();
            localStorage.logintime = nowtime;//存儲(chǔ)登陸時(shí)間，判斷登錄是否過(guò)期
            self.$Message.success('登陸成功');
            self.$router.push({ 
                path:'/',    //這是路由名稱(chēng)     
            })
          }else{
            alert("用戶(hù)名或密碼錯(cuò)誤");
          }
      })
      .catch(function(response) {
          // alert("請(qǐng)求失敗");
      });
    },
  }
}
</script>

// 全局路由守衛(wèi)
router.beforeEach((to, from, next) => {//在路由跳轉(zhuǎn)之前做的事
  var userinfo = '';
  // 這個(gè)是使用localstronge存儲(chǔ)方式存儲(chǔ)的方法
  let nowtime = new Date().getTime();//獲取當(dāng)前時(shí)間戳  毫秒
  let sessiontime = nowtime - localStorage.logintime//當(dāng)前時(shí)間  -  登錄時(shí)間
  console.log(sessiontime)
  // 數(shù)據(jù)保存時(shí)間只有5個(gè)小時(shí)，超過(guò)5個(gè)小時(shí)，清除
  if (sessiontime > 18000000){
    localStorage.clear();
  }
  // 這是取值
  let userinfo = localStorage.userinfo;
}