今天这篇日志记录下做VUE登录的血泪史（VUE2）。
当时也不知道是咋想的，就认为php给VUE提供接口，可能session就不起作用了（现在的登录是用SESSION做的）。
可是登录需要做呀，用什么存储登录的用户信息呢。最开始我还真想过用COOKIE，但是安全性得不到保证，因为在每次HTTP请求的时候，都会把cookie中存储的数据携带在请求中。其实localstroage也不见得安全到那里去，可是总觉得新东西能好一点。
我觉得localstroage就是一个加强版的COOKIE。
localstroage与sessionstroage是HTML5的新属性。使用的相对方便。浏览器支持也做的很好。
这里着重说一下IE，官方给的说法是IE8及以上的浏览器支持。
但是网上大多数的说法是IE8本身是不支持的，只有到了IE9才支持。
这个我没试，IE浏览器我早早的就放弃了。有兴趣，可以试一试。
说到他们二者，就不得不和Cookie对比一下了。
三者的异同
| 特性 | Cookie | localStorage | sessionStorage |
| 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存，可变相设置失效时间。 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
localStorage和sessionStorage操作
localStorage和sessionStorage操作方法都一样，我觉得，他俩是一个玩意。就是‘生命周期不一样’。
setItem存储value
用途：将value存储到key字段
sessionStorage.setItem("key", "value"); localStorage.setItem("aaa", "111"); localStorage.name = "xuanyuan"
getItem获取value
用途：获取指定key本地存储的值
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("asd");
removeItem删除key
用途：删除指定key本地存储的值
sessionStorage.removeItem("key"); localStorage.removeItem("asd");
clear清除所有的key/value
用途：清除所有的key/value
sessionStorage.clear(); localStorage.clear();
其他操作方法：点 ‘.’ 操作和[ ]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
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><br> </div> <div> <Input v-model="username" placeholder="账号" style="width: 300px"></Input><br><br> <Input v-model="password" placeholder="密码" style="width: 300px" type="password"></Input><br><br><br> </div> <div> <Button type="info" @click="executelogin()" class="but">登录</Button> </div> </div> </div> </template> <script> // 引入axios组件 import axios from "axios"; import qs from "qs"; //处理数据 qs.stringify(params) import {checkRule} from '@/assets/js/public';//引入公共js文件 export default { data(){ return{ username:'', password:'' } }, methods: { /** * 提交用户输入的登录信息 */ executelogin() { // 判断浏览器是否支持localstroage if(!window.localStorage){ this.$Message.error(‘您的浏览器不支持localstorage’); return false; } const self = this;//将this对象附到一个不可更改的变量中~ axios({ method: "post", url: "你的url", data: {username: this.username,password:this.password} }) .then(function(response) { checkRule(response,self);//检查是否有权限 if(response.data.status == 1){ // 所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换 // 先存localStorage，再提示操作成功，然后跳路由 // JSON.stringify:将对象转成字符串 // JSON.parse():将字符串装换成对象 let toll = JSON.stringify(response.data.toll);//将当前信息变成json字符串 localStorage.toll = toll;//存储用户信息 let nowtime = new Date().getTime(); localStorage.logintime = nowtime;//存储登陆时间，判断登录是否过期 self.$Message.success('登陆成功'); self.$router.push({ path:'/', //这是路由名称 }) }else{ alert("用户名或密码错误"); } }) .catch(function(response) { // alert("请求失败"); }); }, } } </script>
Router.js
// 全局路由守卫 router.beforeEach((to, from, next) => {//在路由跳转之前做的事 var userinfo = ''; // 这个是使用localstronge存储方式存储的方法 let nowtime = new Date().getTime();//获取当前时间戳 毫秒 let sessiontime = nowtime - localStorage.logintime//当前时间 - 登录时间 console.log(sessiontime) // 数据保存时间只有5个小时，超过5个小时，清除 if (sessiontime > 18000000){ localStorage.clear(); } // 这是取值 let userinfo = localStorage.userinfo; }
以上示例是我博客后台管理系统登录所使用的登录存储登录数据的方法。
这个是第一次尝试，有什么不足的地方，还请指出。
