/**CURD本地存储信息 start**/ (function(doc,win){ var fn=function(){}; fn.prototype={ /*本地数据存储 t:cookie有效时间，单位s; domain:cookie存储所属的domain域*/ setLocalCookie: function (k, v, t,domain) { //如果当前浏览器不支持localStorage将存储在cookie中 typeof window.localStorage !== "undefined" ? localStorage.setItem(k, v) : (function () { t = t || 365 * 12 * 60 * 60; domain=domain?domain:".jwtserver.com"; document.cookie = k + "=" + v + ";max-age=" + t+";domain="+domain+";path=https://www.jb51.net/"; })() }, /*获取本地存储数据*/ getLocalCookie: function (k) { k = k || "localDataTemp"; return typeof window.localStorage !== "undefined" ? localStorage.getItem(k) : (function () { var all = document.cookie.split(";"); var cookieData = {}; for (var i = 0, l = all.length; i < l; i++) { var p = all[i].indexOf("="); var dataName = all[i].substring(0, p).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,""); cookieData[dataName] = all[i].substring(p + 1); } return cookieData[k] })(); }, /*删除本地存储数据*/ clearLocalData: function (k) { k = k || "localDataTemp"; typeof window.localStorage !== "undefined" ? localStorage.removeItem(k) : (function () { document.cookie = k + "=temp" + ";max-age=0"; })() }, init:function(){ this.bindEvent(); }, //事件绑定 bindEvent:function(){ var _this=this; win.addEventListener("message",function(evt){ if(win.parent!=evt.source){return} var options=JSON.parse(evt.data); if(options.type=="GET"){ var data=tools.getLocalCookie(options.key); win.parent.postMessage(data, "*"); } options.type=="SET"&&_this.setLocalCookie(options.key,options.value); options.type=="REM"&&_this.clearLocalData(options.key); },false) } }; var tools=new fn(); tools.init(); })(document,window); /**CURD本地存储信息 end**/
前端页面js代码（客户端）：
//页面初始化向iframe域名发送消息 window.onload = function() { console.log('get key value......................') window.frames[0].postMessage(JSON.stringify({type:"GET",key:"User-Token"}),'*'); } //监听message信息，接收从iframe域下获取到的token信息，然后存储到localstorage或cookie中 window.addEventListener('message', function(e) { console.log('listen.....'); var data = e.data; console.log(data); if(data != null){ localStorage.setItem("User-Token", data); } }, false);
总结：
优点：在非跨域环境下使用JWT机制是一个非常不错的选择，实现方式简单，操作方便，能够快速实现。由于服务端不存储用户状态信息，因此大用户量，对后台服务也不会造成压力；
缺点：跨域实现相对比较麻烦，安全性也有待探讨。因为JWT令牌返回到页面中，可以使用js获取到，如果遇到XSS攻击令牌可能会被盗取，在JWT还没超时的情况下，就会被获取到敏感数据信息。