VUE使用localstorage和sessionstorage实现登录示例详解

目录

• 正文
• localstroage就是一个加强版的COOKIE。
• 三者的异同
• localStorage和sessionStorage操作
• 登录实例：
• Router.js

正文

今天这篇日志记录下做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
 
 
登录实例：
 
 
 
  


 
 
 
 
 
 
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;
}
 
 
 
 
以上示例是我博客后台管理系统登录所使用的登录存储登录数据的方法，更多关于VUE实现登录的资料请关注脚本之家其它相关文章！