情景：前后端分离项目，如果一个页面在跳转另一个页面的同时，想传递数据给另一个页面使用，就涉及到前端页面之间传值的问题。
主要有两个解决方案：cookie 或 localStorage（推荐）
cookie 传值
介绍：
- 浏览器端缓存文件，容量大小受浏览器产品限制
- 前端传值，需要自己封装 js 工具类
- 可作为前端传值，但也可与后端数据交互（特有）
使用：
cookie_utils.js
//封装工具类（新建js文件，使用时引入调用）
var operator = "=";
function getCookieValue(keyStr){
var value = null;
var s = window.document.cookie;
var arr = s.split("; ");
for(var i = 0; i < arr.length; i++){
var str = arr[i];
var k = str.split(operator)[0];
var v = str.split(operator)[1];
if(k == keyStr){
value = v;
break;
}
}
return value;
}
function setCookieValue(key,value){
document.cookie = key+operator+value;
}
login.html
<script src="static/js/cookie_utils.js"></script>
<script type="text/javascript">
//cookie传值
setCookieValue("username", userInfo.username);
setCookieValue("userimg", userInfo.userImg);
</script>
index.html
<script src="static/js/cookie_utils.js"></script>
<script type="text/javascript">
//cookie取值
var name = getCookieValue("username");
var img = getCookieValue("userimg");
</script>
localStorage 传值（推荐）
介绍：
- 浏览器端缓存文件，可存储更大容量数据
- 本身封装有方法，直接调用即可，比较方便
- 不可与后端进行数据交互，前端传值比较有优势
使用：
login.html
<script type="text/javascript">
//localStorage传值
localStorage.setItem("user", JSON.stringify(userInfo));
</script>
index.html
<script type="text/javascript">
//localStorage取值
var jsonStr = localStorage.getItem("user");
//JSON字符串转对象
var userInfo = eval("(" + jsonStr + ")");
//用完后可删除，不让浏览器本地长时间存储（存储的生命周期更长久）
//localStorage.removeItem("user");
</script>